vue3，条件渲染dom元素的问题

cqwcns

场景是这样的，在vue3应用中，我使用了富文本编辑器（ckeditor）。
我需要在工具栏中添加自定义的按钮，由于富文本编辑器的工具栏是动态生成dom元素的，所以我无法直接在html中添加元素，只能通过h()+render()向工具栏添加dom元素。


以下代码，自定义按钮我是成功添加了，但我希望根据isEditorFullScreen变量，来条件渲染icon，自己尝试了两种方法，但都不行（见注释代码）。
所以，如果要向ckeditor工具栏添加按钮，且根据条件渲染icon，有什么办法实现？请各位大佬指教，感谢。

[HTML] 纯文本查看 复制代码

<ckeditor :editor="editor" v-model="editorData" :config="editorConfig" :disabled="editorDisabled"
            @ready="onEditorReady"></ckeditor>

[JavaScript] 纯文本查看 复制代码

import { ref, h, render } from 'vue';
import iconFullScreen from '../components/icons/iconFullScreen.vue';
import iconZoom from '../components/icons/iconZoom.vue';

const isEditorFullScreen = ref(false);

const onEditorReady = () => {
  console.log('EditorReady');
  // 获取父元素
  const domEditorToolBar = document.getElementsByClassName('ck-toolbar__items')[0];

  // 创建子元素，单个icon，渲染正常
  const domEditorFullScreenBtn = h('button', { class: 'ck ck-button', onClick: doEditorFullScreen }, h(iconFullScreen));

  // 尝试使用三元表达式切换icon，但发现不是动态的，只会按初始值渲染，失败
  // const domEditorFullScreenBtn = h('button', { class: 'ck ck-button', onClick: doEditorFullScreen }, h(isEditorFullScreen ? iconZoom : iconFullScreen));

  // 尝试使用条件渲染，发现条件不生效，两个icon都会渲染出来，失败
  // const domEditorFullScreenBtn = h('button', { class: 'ck ck-button', onClick: doEditorFullScreen }, [h(iconFullScreen, { 'v-if': 'isEditorFullScreen' }), h(iconZoom, { 'v-if': '!isEditorFullScreen' })]);

  // 渲染
  render(domEditorFullScreenBtn, domEditorToolBar);
}

CTG嗜血

这应该要监听isEditorFullScreen变量,然后创建不同icon

Mr.[先知]

这种用法 就是错误的方法
vue就不建议操作dom
就算想操作也是用ref去做

我找了下 编辑器是有这样的函数
editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,

        editor.ui.getEditableElement()
你可以查看相关文档

Mr.[先知]

组件式的开发 就不要用这种侵入式的操作了
让组件自我管理 内部的一切
外部调用来给他约束
ck好像是可以注入config吧
你可以考虑这方面

cqwcns

Mr.[先知] 发表于 2023-1-19 11:36
组件式的开发 就不要用这种侵入式的操作了
让组件自我管理 内部的一切
外部调用来给他约束

官方的方法添加工具自定义按钮，我反复测试都不成功，总是报错：
CKEditorError: ckeditor-duplicated-modules

Mr.[先知]

cqwcns 发表于 2023-1-19 15:43
官方的方法添加工具自定义按钮，我反复测试都不成功，总是报错：
CKEditorError: ckeditor-duplicated-m ...

报错 很有可能是参数写错了 参数是有类型的 比如 string的整数 这种 有的要object