wangeditor-team / wangEditor

wangEditor, open-source Web rich text editor 开源 Web 富文本编辑器
http://www.wangeditor.com/
MIT License
17.55k stars 3.32k forks source link

【咨询】【VUE3】无法通过按钮切换实现更新工具栏的菜单 #5927

Open ricsy opened 3 months ago

ricsy commented 3 months ago

问题描述

想在编辑器上方增加切换按钮,通过点击事件实现去掉不同的菜单,但执行Boot.setToolbarConfig(toolbarConfig)更新配置后,再使用console.log(Boot.toolbarConfig)打印配置信息,看打印结果是更新了的,可是界面的工具栏信息没有进行刷新。

wangEditor 版本

"@wangeditor/core": "^1.1.19"
"@wangeditor/editor": "^5.1.23"
"@wangeditor/editor-for-vue": "^5.1.12"

是否查阅了文档 ?

(文档链接 www.wangeditor.com

最小成本的复现步骤

<div class="switch-container">
  <vxe-switch
    v-model="editorMode"
    open-label="简洁"
    close-label="完整"
    open-value="simple"
    close-value="full"
    @change="handleEditorModeChangeEvent"
  ></vxe-switch>
</div>
const handleEditorModeChangeEvent = () =>  {
  const fullExcludeKey = [
    "group-video",
    "insertVideo",
    "uploadVideo",
    "editVideoSize"
    "insertImage",
  ];
  const simpleExcludeKey = [
    "|",
    "group-more-style",
    "color",
    "bgColor",
    "emotion", 
    "headerSelect",
    "blockquote",
    "fontSize", 
    "fontFamily",
    "lineHeight",
    "bold",
    "underline",
    "italic",
    "group-justify",
    "group-indent", 
    "bulletedList",
    "numberedList", 
    "todo",
    "insertLink",
    "insertTable",
    "divider",
    "group-video",
    "insertVideo",
    "uploadVideo",
    "editVideoSize",
    "insertImage",
  ];
  const calcExcludeKeys = editorMode.value == "simple" ? simpleExcludeKey: fullExcludeKey;
  const toolbarConfig = {
    excludeKeys: calcExcludeKeys,
  }
  Boot.setToolbarConfig(toolbarConfig);
}
cycleccc commented 3 months ago

editor 要销毁重建才会改变,不会实时更新。

ricsy commented 3 months ago

这样,那重建代码demo有吗

cycleccc commented 3 months ago

调用 editor api 销毁重建试试,具体 api 使用方式看文档和 demo ,看这个也行 docs

cycleccc commented 3 months ago

我在 最新的 wangeditor-next 实现了点击更新 icon 和 title 功能,有需要的话你可以看一下以下代码,然后 切换 wangeditor-next 实现这个功能 https://github.com/cycleccc/wangEditor-next/blob/c452760a3665dc100e31a9622cf8c6a8f44926a9/packages/basic-modules/src/modules/full-screen/menu/FullScreen.ts#L28

cycleccc commented 3 months ago

切换 icon 和 title 实现了,去掉 某个 key 这个还没实现

ricsy commented 2 months ago

非常感谢!不好意思,没注意关注最新消息;目前没用到wangeditor-next,已经通过旧版本的销毁重建实现切换到不同的模式了。"切换 icon 和 title "这个指的是已经提供切换模式并同时刷新对应的菜单的入口了吗?

cycleccc commented 2 months ago

实现了点击更新 icon 图标和 title