vue3下富文本编辑器@wangeditor的一些配置

在vue3下使用v5版本

获取所有key的方法

	editorRef.value.getAllMenuKeys()

DOM

	<Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue' // 引用组件
import { ref, shallowRef } from 'vue'
import { DomEditor } from '@wangeditor/editor'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// 配置
const toolbarConfig = {
  // 当前工具栏显示的项目 
  toolbarKeys: [
    'fontSize',
    'bold',
    'italic',
    'underline',
    '|',
    'color',
    'bgColor',
    '|',
    'justifyLeft',
    'justifyRight',
    'justifyCenter',
  ]
}
const editorConfig = { placeholder: '请输入内容...' }
const mode = ref('default') // 或 'simple'

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

// 用来输出获取到的所有工具栏操作key的方法
const onToolbarConfig = () => {
  // 获取所有工具key
  console.log(editorRef.value.getAllMenuKeys())
}
</script>