VUE3富文本

Vue 3 中使用富文本编辑器可以选择一些第三方库来实现，比如 Quill.js、TinyMCE、CKEditor 等。

下面以 Quill.js 为例，介绍在 Vue 3 中如何使用富文本编辑器。

1. 安装 Quill.js

npm install quill

2. 创建一个 Vue 组件

<template>
  <div>
    <div ref="editor" :id="id"></div>
  </div>
</template>

<script>
import Quill from 'quill';

export default {
  props: {
    id: {
      type: String,
      required: true,
    },
    value: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      this.editor = new Quill(this.$refs.editor, {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], //引用，代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], //列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], //对齐方式
            ['clean'], //清除文本格式
            ['link', 'image', 'video'], //链接、图片、视频
          ],
        },
        placeholder: '请输入内容',
        theme: 'snow',
      });
      this.editor.on('text-change', () => {
        let html = this.editor.root.innerHTML;
        this.$emit('input', html);
      });
      this.editor.root.innerHTML = this.value;
    },
  },
};
</script>

3. 在父组件中使用

<template>
  <div>
    <rich-editor id="my-editor" v-model="content"></rich-editor>
  </div>
</template>

<script>
import RichEditor from './components/RichEditor.vue';

export default {
  components: {
    RichEditor,
  },
  data() {
    return {
      content: '',
    };
  },
};
</script>

在上面的代码中，我们创建了一个名为 RichEditor 的组件，其中引入了 Quill.js，并在组件的 mounted 钩子函数中初始化了编辑器。同时，我们使用了一个 prop id 来传递编辑器的 ID 值，value 来接收父组件传入的富文本内容，并通过 v-model 实现了双向绑定。

在父组件中，我们通过引入 RichEditor 组件，并传递一个 id 和 v-model 来使用该富文本编辑器。

需要注意的是，由于 Quill.js 是基于 DOM 的，因此在 Vue 3 中需要使用 ref 来获取元素的引用。同时，在初始化编辑器后需要将编辑器的内容设置为父组件传入的值，否则父组件中的内容将无法显示在编辑器中。

以上就是在 Vue 3 中使用 Quill.js 实现富文本编辑器的步骤，希望能对你有所帮助。