vue 项目添加 富文本编辑器

项目中需要一个编辑器，尝试了两三个，最后选定了一个。
问了 文心一言 ，给出了结果：（截图）
尝试的有Quill、TinyMCE、CKEditor、WangEditor，最终选择了WangEditor。（以下内容仅代表我个人安装使用是的感受，不代表编辑器不好）

1. Quill的一行文字中的单个文字不能设置样式，比如加粗，整行文字都会加粗，其他的还好吧，尝试的不多，就卸载了。
2. TinyMCE 安装的时间比较长，安装后，页面不能显示，好像还有一些报错吧，忘了，就卸载了，卸载的时间也很长。
3. CKEditor这个对 node 的版本有一定的要求，应该是 14以上 的才可以，安装时间长，安装后不显示，果断卸载。
4. 最后尝试用WangEditor，最起码显示了，而且一行的单个文字可以设置样式，这样就够了。所以到此为止了，没有尝试mavon-editor

官方文档：https://www.wangeditor.com/v5/getting-started.html

安装：npm install @wangeditor/editor-for-vue@next --save

使用：
	在使用编辑器的页面 导入
	 import '@wangeditor/editor/dist/css/style.css' // 引入 css
 	 import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
 	 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 	 
 	 
 	使用时会 当成组件用，写在 components 里
	 components: { Editor, Toolbar },
	
	
	以下为setup的内容
	 // 编辑器实例，必须用 shallowRef
      const editorRef = shallowRef()

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

      // 模拟 ajax 异步获取内容
      onMounted(() => {
        setTimeout(() => {
          valueHtml.value = '<p>模拟 Ajax 异步设置内容</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 实例，重要！
      }