Vue3 + wangeditor 富文本编辑器的简易使用版

Vue3 + wangeditor 富文本编辑器的简易使用版

代码

下载版本的时候需要注意，要改成Vue3适用的，这里用的版本是

“@wangeditor/editor”: “^5.1.23”,
“@wangeditor/editor-for-vue”: “^5.1.12”,

<Toolbar:editor="editorRef":defaultConfig="toolbarConfig"style="border-bottom: 1px solid #ccc"ref="toolbarRef"@click="handleToolbarClick"/><!-- 编辑器 --><Editorv-model="editorValue":defaultConfig="editorConfig"style="height: 500px; overflow-y: hidden"@onCreated="handleCreated"/>

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'// 编辑器实例（用 shallowRef 避免响应式代理问题）
const editorRef = shallowRef()
// 编辑器内容（v-model 绑定）
const editorValue = ref('')
// 工具栏配置
const toolbarConfig = {toolbarKeys: ['bold',          // 加粗'fontSize',      // 字号'lineHeight',    // 行高'bulletedList',  // 无序列表'numberedList',  // 有序列表'emotion',       // 表情'undo',          // 撤销'redo',          // 恢复'fullScreen',    // 全屏], // 要的// excludeKeys: ['uploadImage'], // 排除的
}
const editorConfig = {}
const toolbarRef = ref(null)// 编辑器创建回调
function handleCreated(editor) {editorRef.value = editor
}
function handleToolbarClick(event) {// 获取点击的目标元素let target = event.targetlet targetParent = target.closest('.w-e-menu-tooltip-v5')let clickMenuName = targetParent.getAttribute('data-menu-key')if (clickMenuName === 'fullScreen') {// 点击工具栏的菜单事件处理，如不需要则去掉if (isFullScreen.value) {setTimeout(() => {isFullScreen.value = !isFullScreen.value}, 200)} else {isFullScreen.value = !isFullScreen.value}}
}

最后的效果

只留了基础的几个操作