vue如何实现富文本

使用 vue-quill-editor 实现富文本

安装 vue-quill-editor 依赖

npm install vue-quill-editor --save

在组件中引入并使用

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      content: ''
    }
  }
}

模板中使用

<quill-editor v-model="content" :options="editorOption"></quill-editor>

配置编辑器选项

editorOption: {
  placeholder: '请输入内容',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 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']
    ]
  }
}

使用 tinymce-vue 实现富文本

安装 tinymce-vue 和 tinymce

npm install @tinymce/tinymce-vue tinymce --save

在组件中引入

import Editor from '@tinymce/tinymce-vue'

模板中使用

<editor
  v-model="content"
  :init="initOptions"
/>

配置初始化选项

initOptions: {
  height: 500,
  language_url: '/static/tinymce/langs/zh_CN.js',
  language: 'zh_CN',
  plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave',
  toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
  images_upload_handler: function (blobInfo, success, failure) {
    // 图片上传处理
  }
}

自定义富文本编辑器实现

创建基础编辑器组件

<div contenteditable="true" ref="editor" @input="updateContent"></div>

处理内容更新

updateContent() {
  this.content = this.$refs.editor.innerHTML
}

添加基本工具栏功能

<div class="toolbar">
  <button @click="formatText('bold')">加粗</button>
  <button @click="formatText('italic')">斜体</button>
  <button @click="insertImage">插入图片</button>
</div>

实现文本格式化方法

formatText(command, value = null) {
  document.execCommand(command, false, value)
  this.$refs.editor.focus()
}

实现图片插入功能

insertImage() {
  const url = prompt('输入图片URL')
  if (url) {
    document.execCommand('insertImage', false, url)
  }
}

富文本内容的安全处理

安装 DOMPurify 进行内容净化

npm install dompurify --save

在提交前净化内容

import DOMPurify from 'dompurify'

methods: {
  submitContent() {
    const cleanContent = DOMPurify.sanitize(this.content)
    // 提交净化后的内容
  }
}

设置白名单允许的标签和属性

const cleanContent = DOMPurify.sanitize(this.content, {
  ALLOWED_TAGS: ['p', 'b', 'i', 'u', 'img', 'br', 'a'],
  ALLOWED_ATTR: ['href', 'src', 'alt']
})

富文本内容存储与显示

存储内容到数据库

axios.post('/api/content', {
  content: this.content
})

显示富文本内容

<div v-html="content"></div>

添加样式确保显示一致

.ql-editor {
  min-height: 200px;
}
.ql-container {
  font-family: inherit;
}