vue3，条件渲染dom元素的问题
场景是这样的，在vue3应用中，我使用了富文本编辑器（ckeditor）。我需要在工具栏中添加自定义的按钮，由于富文本编辑器的工具栏是动态生成dom元素的，所以我无法直接在html中添加元素，只能通过h()+render()向工具栏添加dom元素。
以下代码，自定义按钮我是成功添加了，但我希望根据isEditorFullScreen变量，来条件渲染icon，自己尝试了两种方法，但都不行（见注释代码）。
所以，如果要向ckeditor工具栏添加按钮，且根据条件渲染icon，有什么办法实现？请各位大佬指教，感谢。
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig" :disabled="editorDisabled"
@ready="onEditorReady"></ckeditor>
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');
// 创建子元素，单个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 }, );
// 渲染
render(domEditorFullScreenBtn, domEditorToolBar);
} 这应该要监听isEditorFullScreen变量,然后创建不同icon 这种用法 就是错误的方法
vue就不建议操作dom
就算想操作也是用ref去做
我找了下 编辑器是有这样的函数
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
你可以查看相关文档 组件式的开发 就不要用这种侵入式的操作了
让组件自我管理 内部的一切
外部调用来给他约束
ck好像是可以注入config吧
你可以考虑这方面 Mr.[先知] 发表于 2023-1-19 11:36
组件式的开发 就不要用这种侵入式的操作了
让组件自我管理 内部的一切
外部调用来给他约束
官方的方法添加工具自定义按钮，我反复测试都不成功，总是报错：
CKEditorError: ckeditor-duplicated-modules cqwcns 发表于 2023-1-19 15:43
官方的方法添加工具自定义按钮，我反复测试都不成功，总是报错：
CKEditorError: ckeditor-duplicated-m ...
报错 很有可能是参数写错了 参数是有类型的 比如 string的整数 这种 有的要object
页:
[1]