Comments (12)
class SaveButtonMenu { constructor() { this.title = '保存' // 自定义菜单标题 // 可选 this.iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" version="1.1" width="20" height="20" viewBox="0 0 20 20"><g><path d="M15,17.5L15,10.83333L5,10.83333L5,17.5L3.333333,17.5C2.873096,17.5,2.5,17.1269,2.5,16.6667L2.5,3.333333C2.5,2.873096,2.873096,2.5,3.333333,2.5L14.1667,2.5L17.5,5.83333L17.5,16.6667C17.5,17.1269,17.1269,17.5,16.6667,17.5L15,17.5ZM13.3333,17.5L6.66667,17.5L6.66667,12.5L13.3333,12.5L13.3333,17.5Z" fill-opacity="1"/></g></svg>' this.tag = 'button' this.alwaysEnable = true } // 获取菜单执行时的 value ,用不到则返回空 字符串或 false getValue(editor) { // JS 语法 return '' } // 菜单是否需要激活(如选中加粗文本,“加粗”菜单会激活),用不到则返回 false isActive(editor) { // JS 语法 return false } // 菜单是否需要禁用(如选中 H1 ,“引用”菜单被禁用),用不到则返回 false isDisabled(editor) { // JS 语法 return false } // 点击菜单时触发的函数 exec(editor, value) { // JS 语法 console.log('点击了保存按钮') // saveFunction(editor) if (editor.isDisabled(editor)) return editor.insertText(value) emit('handleSave') } } const saveConf = { key: 'customSave7', // 定义 menu key :要保证唯一、不重复(重要) factory() { return new SaveButtonMenu() // 把
YourMenuClass 替换为你菜单的 class } } if (localStorage.getItem('customSave7') === null) { localStorage.setItem('customSave7', 'true') Boot.registerMenu(saveConf) }
我在 // 点击菜单时触发的函数
exec(editor, value) {
// JS 语法
console.log('点击了保存按钮')
// saveFunction(editor)
if (editor.isDisabled(editor)) return
editor.insertText(value)
emit('handleSave')
} 虽然我用if (localStorage.getItem('customSave7') === null) {
localStorage.setItem('customSave7', 'true')
Boot.registerMenu(saveConf)
}这种方法保证只注册一次,但是点击菜单触发的时候需要把这事件通过 emit('handleSave')传递给父组件,也传递不出去。
传给父组件,也传不出去。
from wangeditor.
能用 sandbox 做个最小复现吗😳
from wangeditor.
同样是这个问题,按照官网的自定义button menu 三步走的。
<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import {
onMounted,
onBeforeUnmount,
computed,
shallowRef,
getCurrentInstance,
nextTick,
ref
} from "vue";
import { Editor } from "@wangeditor/editor-for-vue";
import { Boot } from "@wangeditor/editor";
import { MyButtonMenu } from "@/packages/RegisterCommentButton";
// 自定义菜单配置
const menu1Conf = {
key: "commentButton", // 定义 menu key :要保证唯一、不重复(重要)
factory() {
return new MyButtonMenu(); // 把 `YourMenuClass` 替换为你菜单的 class
}
};
// 注册菜单
Boot.registerMenu(menu1Conf);
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef();
const editorConfig = { placeholder: "请输入内容...", autoFocus: false };
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
const handleCreated = async editor => {
editorRef.value = editor; // 记录 editor 实例,重要!
console.log("editor", editorRef.value);
await nextTick();
console.log(editor.getMenuConfig("bold"));
};
const handleChange = editor => {
// 内容改变事件
// console.log("change:", editor.children);
// console.log("getAllMenuKeys():", editor.getAllMenuKeys());
};
</script>
from wangeditor.
这是类的定义
import { IButtonMenu, IDomEditor } from "@wangeditor/editor";
export class MyButtonMenu implements IButtonMenu {
// TS 语法
// class MyButtonMenu { // JS 语法
title = "";
tag = "";
constructor() {
this.title = "My menu title"; // 自定义菜单标题
// this.iconSvg = '<svg>...</svg>' // 可选
this.tag = "button";
}
// 获取菜单执行时的 value ,用不到则返回空 字符串或 false
getValue(editor: IDomEditor): string | boolean {
// TS 语法
// getValue(editor) { // JS 语法
return " hello ";
}
// 菜单是否需要激活(如选中加粗文本,“加粗”菜单会激活),用不到则返回 false
isActive(editor: IDomEditor): boolean {
// TS 语法
// isActive(editor) { // JS 语法
return false;
}
// 菜单是否需要禁用(如选中 H1 ,“引用”菜单被禁用),用不到则返回 false
isDisabled(editor: IDomEditor): boolean {
// TS 语法
// isDisabled(editor) { // JS 语法
return false;
}
// 点击菜单时触发的函数
exec(editor: IDomEditor, value: string | boolean) {
// TS 语法
// exec(editor, value) { // JS 语法
if (this.isDisabled(editor)) return;
editor.insertText(value); // value 即 this.value(editor) 的返回值
}
}
from wangeditor.
Uncaught (in promise) Error: Duplicated key 'commentButton' in menu items 这个是报错
from wangeditor.
@liubiliubi 你好,能使用这个 沙盒demo做个最小复现吗
from wangeditor.
这有助于快速排查修复bug,业余维护,时间有限。
from wangeditor.
这有助于快速排查修复bug,业余维护,时间有限。
好的,等会发您
from wangeditor.
这有助于快速排查修复bug,业余维护,时间有限。
我解决了。问题是没有安装@wangeditor/editor的依赖,但是为啥没有提示找不到模块的报错??不得而知
from wangeditor.
在使用 npm 或其它时应该会提示 peerDependencies @wangeditor/editor 必须大于 5.1.0,确实提示不够明显,这也是个问题。
from wangeditor.
from wangeditor.
这个问题是自定义菜单重复注册导致的。
解决方法:在注册前判断是否已经注册
// saveConf 是自定义菜单
// editor 是编辑器实例
// getAllMenuKeys() 获取所有注册的菜单
if(!editor.getAllMenuKeys().includes(saveConf)){
Boot.registerMenu(saveConf)
}
from wangeditor.
Related Issues (20)
- 全屏按钮点击后icon未变化
- 全屏按钮点击后icon未变化 HOT 5
- 使用初始化的数据,发现渲染后的顺序乱了 HOT 9
- insertFn()方法塞入的URL报 412问题
- 在CEF(chrom嵌入式框架)上运行,全选文字后输入报错,然后不能输入,稳定复现 HOT 7
- getPanelContentElem中insertNode了节点,触发change时报错
- 多文件上传调用接口次数问题 HOT 1
- 【咨询】【VUE3】无法通过按钮切换实现更新工具栏的菜单 HOT 7
- 工具栏中的标题选择是否可以添加H6标签 HOT 4
- meta动态传参
- 使用 setHtml 设置内容时(内容包含 table 表格),table 表格显示错误(里面的内容都没了) HOT 7
- 使用 setHtml 设置内容时(内容包含 table 表格),table 表格显示错误(里面的内容都没了)
- 撤销功能 HOT 6
- wangEditor4.7.15选区问题 HOT 3
- 大佬能新增 查找与替换 以及可以插入自定义tag 回退直接删除tag HOT 1
- 使用DomEditor.getToolbar(editor)获取到的toolbar是个null HOT 5
- 有办法监听编辑器里面的删除表格事件吗?
- 请问vue3版本插件 如何实现 当内容匹配到 {{xx}},说明以{{开始,}}结束,中间xxx 标识内容,如果匹配到,则{{xx}} 加粗或者设置特殊颜色 HOT 1
- Underscore.js 代码生成控制不当(“代码注入”)漏洞 HOT 1
- 能不能仅仅禁用工具栏? HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wangeditor.