这是一款支持Vue3的富文本编辑器
GitHub地址：https://github.com/vueup/vue-quill/
VueQuill官网：https://vueup.github.io/vue-quill/

// 查看 @vueup/vue-quill 版本
npm view @vueup/vue-quill versions --json
 
// 导入 @vueup/vue-quill 依赖包
npm i @vueup/vue-quill@1.0.0

一、首先实现父页面【index.vue】

 
<script>
import QuillEditor from './components/quillEditor'
 
export default {
  name: 'QuillEditorComponent',
  components: {
    QuillEditor
  },
  data () {
    return {
      // 编辑器内容
      editorContent: ''
    }
  },
  methods: {
    /**
     * 设置编辑器内容
     */
    async handleSetContentClick(evt) {
      this.$elementUtil.handleElButtonBlur(evt)
 
      const refs = await this.$refs.quillEditorRef;
      const status = await refs.handleSetHtml('
你好世界！
')
      console.log('handleSetContentClick =>', status)
    },
 
    /**
     * 获取编辑器内容
     */
    async handleGetContentClick(evt) {
      this.$elementUtil.handleElButtonBlur(evt)
 
      const refs = await this.$refs.quillEditorRef;
      this.editorContent = await refs.handleGetHtml();
      console.log('handleGetContentClick =>', this.editorContent)
    },
  }
}
script>

二、然后设计子组件【quillEditor.vue】

 
<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
 
export default {
  components: {
    QuillEditor
  },
  data () {
    return {
      // 编辑器内容
      content: '',
 
      // 编辑器选项
      options: {
        debug: 'info',
        modules: {
          toolbar: ['bold', 'italic', 'underline']
        },
        placeholder: '请输入内容~',
        readOnly: false,
        theme: 'snow'
      }
    }
  },
  methods: {
    /**
     * 设置编辑器 Text 内容
     */
    async handleSetText(content) {
      const refs = await this.$refs
      refs.quill.setText(content)
      return 'OK'
    },
 
    /**
     * 获取编辑器 Text 内容
     */
    async handleGetText() {
      const refs = await this.$refs
      return refs.quill.getText();
    },
 
    /**
     * 设置编辑器 Html 代码
     */
    async handleSetHtml(content) {
      const refs = await this.$refs
      refs.quill.setHTML(content)
      return 'OK'
    },
 
    /**
     * 获取编辑器 Html 代码
     */
    async handleGetHtml() {
      const refs = await this.$refs
      return refs.quill.getHTML();
    }
  }
}
script>

三、效果如下 ~