vue2前端富文本实现

Vue2中的富文本编辑通常通过第三方组件库来实现，如Vue-quill-editor、vue-cropper等，它们允许开发者在前端构建复杂的文本输入区域，支持HTML标签插入、样式编辑等功能。以下是使用Vue-quill-editor作为例子：

1. 首先，在项目中安装所需的库：

npm install vue-quill-editor --save

2. 在组件模板中引入并使用Quill实例：

<template>
  <div id="quill-container">
    <quill-editor v-model="content" :config="quillConfig"></quill-editor>
  </div>
</template>

<script>
import QuillEditor from 'vue-quill-editor'

export default {
  components: { QuillEditor },
  data() {
    return {
      content: '',
      quillConfig: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{'color': []}, {'background': []}],
            ['blockquote', 'code-block'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'indent': '-1'}, { 'indent': '+1' }],
            ['link', 'image']
          ]
        },
        placeholder: '在此处撰写...',
        theme: 'snow'
      }
    }
  }
}
</script>

3. 在组件内，`v-model`绑定数据到富文本内容，`quillConfig`用于配置编辑器的行为。