vue3+vite4+wangEditor5 打印默认工具栏配置

最新推荐文章于 2024-09-23 17:01:55 发布

sd_jiade

最新推荐文章于 2024-09-23 17:01:55 发布

阅读量1k

点赞数 4

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/sd_jiade/article/details/129516599

版权

文章介绍了如何在Vue3项目中安装和创建wangEditor5组件，包括引入样式、编辑器实例的创建和销毁、toolbar与menu的配置以及在nextTick中获取编辑器实例的方法。同时展示了通过editor.getAllMenuKeys获取所有注册菜单键的功能。

摘要由CSDN通过智能技术生成

1. 安装wangEditor5及wangeditor5-for-vue3

npm install @wangeditor/editor wangeditor5-for-vue3  --save

2. 创建一个组件WangEditor.vue

<script  setup>
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
 import { onBeforeUnmount, ref, shallowRef, onMounted, nextTick, resolveComponent, reactive } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { DomEditor } from '@wangeditor/editor'
 const simplemode = ref('default')
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef()
 // 内容 HTML
 const valueHtml = ref('<p>hello</p>')
 
 // 模拟 ajax 异步获取内容
 onMounted(() => {
     setTimeout(() => {
         valueHtml.value = '<p>模拟 Ajax 异步设置内容123</p>'
     }, 1500)
 })
 
 const toolbarConfig = {
     //工具栏配置 和菜单配置是分离的
 }
 const editorConfig = { placeholder: '请输入内容...' }
 
 // 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
     const editor = editorRef.value
 
     if (editor == null) return
     editor.destroy()
 })
 
 const handleCreated = (editor) => {
     editorRef.value = editor // 记录 editor 实例，重要！
 
     nextTick(() => {
         const editor = editorRef.value
         const toolbar = DomEditor.getToolbar(editor)
         console.log(toolbar.getConfig().toolbarKeys)
         console.log('simplemode:', simplemode)
     })
     // console.log(editor.getAllMenuKeys()) //打印所有注册的菜单Key
 }
 </script>   
 
 <template>
     <div style="border: 1px solid #ccc">
         <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
             :mode="simplemode" />
         <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
             :mode="simplemode" @onCreated="handleCreated" />
     </div>
 </template>

3.getConfig

wangEditor 从 V5 版本开始，工具栏配置和菜单配置（如配置颜色、字体、链接校验、上传图片等）分离了。

官方给的代码如下：

要获取这个Editor实例editor要在nextTick才可获取。

vue官网对该函数的解释是：

当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。

nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

我的理解是这个响应系统在数据更新后不是立即就更新，要到下一个轮训tick才更新，所以要获取editor这个实例要放在该方法里。

打印结果如下图：

4.editor.getAllMenuKeys()

查询编辑器注册的所有菜单 key （可能有的不在工具栏上）

代码如下：

 const handleCreated = (editor) => {
     editorRef.value = editor;// 记录 editor 实例，重要！
     nextTick(() => {
         const editor = editorRef.value
         console.log(editor.getAllMenuKeys()) //打印所有注册的菜单Key
     })    
 }

打印结果：