vue如何引入富文本

在Vue项目中引入富文本编辑器，通常有以下几种常见的方式：1、使用第三方富文本编辑器库，2、通过组件形式引入，3、配置与自定义。下面将详细介绍这些方法，并提供详细的解释和背景信息。

一、使用第三方富文本编辑器库

使用第三方富文本编辑器库是最简单和最常见的方法。以下是一些流行的富文本编辑器库及其引入方法：

Quill
TinyMCE
CKEditor
Draft.js

Quill

安装：npm install quill

引入并使用：

import Vue from 'vue';
import Quill from 'quill';
import 'quill/dist/quill.snow.css';
Vue.use(Quill);
// 在组件中使用
new Vue({
  el: '#app',
  data: {
    content: ''
  },
  template: `
    <div>
      <quill-editor v-model="content" :options="{ theme: 'snow' }"></quill-editor>
    </div>
  `
});

TinyMCE

安装：npm install tinymce

引入并使用：

import Vue from 'vue';
import { Editor } from '@tinymce/tinymce-vue';
Vue.component('Editor', Editor);
// 在组件中使用
new Vue({
  el: '#app',
  data: {
    content: ''
  },
  template: `
    <div>
      <editor v-model="content" :init="{ plugins: 'link image code', toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code' }"></editor>
    </div>
  `
});

CKEditor

安装：npm install @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

引入并使用：

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
Vue.use(CKEditor);
// 在组件中使用
new Vue({
  el: '#app',
  data: {
    editor: ClassicEditor,
    content: ''
  },
  template: `
    <div>
      <ckeditor :editor="editor" v-model="content"></ckeditor>
    </div>
  `
});

Draft.js

安装：npm install draft-js

引入并使用：

import Vue from 'vue';
import { Editor, EditorState } from 'draft-js';
import 'draft-js/dist/Draft.css';
new Vue({
  el: '#app',
  data: {
    editorState: EditorState.createEmpty()
  },
  methods: {
    onChange(editorState) {
      this.editorState = editorState;
    }
  },
  template: `
    <div>
      <editor :editorState="editorState" @change="onChange"></editor>
    </div>
  `
});

二、通过组件形式引入

为了更好的组织代码，可以将富文本编辑器封装成一个Vue组件。以下是如何将Quill封装成一个Vue组件的示例：

创建一个QuillEditor.vue组件：

<template>
  <div ref="quillEditor"></div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.snow.css';
export default {
  name: 'QuillEditor',
  props: ['value'],
  mounted() {
    this.editor = new Quill(this.$refs.quillEditor, {
      theme: 'snow'
    });
    this.editor.on('text-change', () => {
      this.$emit('input', this.editor.root.innerHTML);
    });
  },
  watch: {
    value(val) {
      if (val !== this.editor.root.innerHTML) {
        this.editor.root.innerHTML = val;
      }
    }
  }
};
</script>

在其他组件中使用QuillEditor组件：

<template>
  <div>
    <quill-editor v-model="content"></quill-editor>
  </div>
</template>
<script>
import QuillEditor from './components/QuillEditor.vue';
export default {
  components: { QuillEditor },
  data() {
    return {
      content: ''
    };
  }
};
</script>

三、配置与自定义

有时，默认配置无法满足所有需求，需要对富文本编辑器进行配置与自定义。以下是如何自定义Quill编辑器的示例：

自定义工具栏：

<template>
  <div ref="quillEditor"></div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.snow.css';
export default {
  name: 'CustomQuillEditor',
  props: ['value'],
  mounted() {
    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }],               // custom button values
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
      [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
      [{ 'direction': 'rtl' }],                         // text direction
      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['clean']                                         // remove formatting button
    ];
    this.editor = new Quill(this.$refs.quillEditor, {
      modules: {
        toolbar: toolbarOptions
      },
      theme: 'snow'
    });
    this.editor.on('text-change', () => {
      this.$emit('input', this.editor.root.innerHTML);
    });
  },
  watch: {
    value(val) {
      if (val !== this.editor.root.innerHTML) {
        this.editor.root.innerHTML = val;
      }
    }
  }
};
</script>

增加自定义功能：

import Quill from 'quill';
let BlockEmbed = Quill.import('blots/block/embed');
class DividerBlot extends BlockEmbed {
  static create(value) {
    let node = super.create();
    node.setAttribute('contenteditable', false);
    return node;
  }
  static value(node) {
    return {
      contenteditable: node.getAttribute('contenteditable')
    };
  }
}
DividerBlot.blotName = 'divider';
DividerBlot.tagName = 'hr';
Quill.register(DividerBlot);
export default {
  name: 'CustomQuillEditor',
  props: ['value'],
  mounted() {
    this.editor = new Quill(this.$refs.quillEditor, {
      modules: {
        toolbar: {
          container: [
            [{ 'header': '1' }, { 'header': '2' }],
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            ['divider'] // custom button
          ],
          handlers: {
            'divider': function() {
              const range = this.quill.getSelection();
              this.quill.insertEmbed(range.index, 'divider', true, Quill.sources.USER);
            }
          }
        }
      },
      theme: 'snow'
    });
    this.editor.on('text-change', () => {
      this.$emit('input', this.editor.root.innerHTML);
    });
  },
  watch: {
    value(val) {
      if (val !== this.editor.root.innerHTML) {
        this.editor.root.innerHTML = val;
      }
    }
  }
};

总结

引入富文本编辑器到Vue项目有多种方法，1、使用第三方富文本编辑器库，2、通过组件形式引入，3、配置与自定义，每种方法都有其优势和适用场景。使用第三方库可以快速上手，通过组件形式引入可以提高代码的可维护性，自定义配置则可以满足更复杂的业务需求。根据项目需求选择合适的方法，可以提高开发效率和用户体验。建议在选择编辑器时，考虑到项目的实际需求和未来可能的扩展性，以便选择最适合的解决方案。

vue如何引入富文本

一、使用第三方富文本编辑器库

二、通过组件形式引入

三、配置与自定义

总结

相关问答FAQs：

发表回复