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"
 />
 <!-- 编辑器 -->
 <Editor
   v-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.target
  let 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
    }
  }
}

最后的效果

只留了基础的几个操作