Vue富文本编辑器探究

一、Vue富文本编辑器艾特

在实际项目开发中，我们经常需要用到富文本编辑器，用来编辑文章、活动详情、产品介绍等内容。Vue富文本编辑器，作为一款web前端技术中的常用组件，它可以帮助我们轻松快捷地实现所需的编辑功能。

Vue富文本编辑器相较于纯文本编辑器来说，不但可以支持文本、表格、图表等多种元素的编辑，还可以方便地添加自定义样式、第三方插件等。

其中，Vue富文本编辑器可以很方便地实现图片、视频、音频的插入，并配合axios等插件实现图片上传、音视频上传等功能。

二、Vue富文本编辑器后台去除标签

在使用Vue富文本编辑器时，我们常常需要将编辑后的内容存储到服务器，如果直接保存，会将富文本中大量的html标签一同保存至数据库中。

因此，我们需要对富文本编辑器提交的内容进行过滤，去除多余的html标签。此时，我们可以在后台进行过滤处理，使用node.js等后台语言去除html标签，防止后续的展示过程中出现异常情况。

三、Vue富文本编辑器插件

Vue富文本编辑器是一个非常方便的组件，不仅仅可以实现基础的编辑功能，还支持插件扩展，丰富其编辑功能。

常用的插件有：

Quill-image-drop-module，实现在编辑器中拖拽图片上传的功能；
Vue-Quill-Editor，一款Vue的富文本编辑器，易于使用且扩展性强；
Quill-video-resize-module，视频大小调整插件；
Quill-table-contents，表格目录插件等等。

四、Vue富文本编辑器复制word图片

在编辑文档时，我们有时需要从word等其他软件中复制一些图文内容到富文本编辑器中。但是，普通的富文本编辑器并不能支持复制word中的图片，只能把复制的内容转换为普通的文本。

因此，需要借助一些插件，比如Quill-image-resize-module插件，它可以实现在富文本编辑器中读取和显示word中的图片，并且对其进行大小和样式的调整。

五、Vue富文本编辑器组件

在实际项目开中，我们通常需要将富文本编辑器封装为一个组件方便调用和重用，这样可以在不同的页面中直接调用组件即可，避免出现重复编写代码的情况。

Vue富文本编辑器组件可以在全局注册，也可以在组件内部进行注册。全局注册后，可以在任何一个.vue文件中直接使用Vue富文本编辑器组件，比如：

<template>
  <div>
    <VueEditor v-model="content" :options="editorOption"></VueEditor>
  </div>
</template>

<script>
import { VueEditor } from 'vue2-editor'
export default {
  components: {
    VueEditor
  },
  data () {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: [
            [{ header: [1, 2, false] }],
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 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']
          ]
        }
      }
    }
  }
}
</script>

六、Vue富文本编辑器插件推荐

以下是一些值得推荐的Vue富文本编辑器插件：

Quill-image-drop-module，实现在编辑器中拖拽图片上传的功能；
Vue-Quill-Editor，一款Vue的富文本编辑器，易于使用且扩展性强；
Quill-video-resize-module，视频大小调整插件；
Quill-table-contents，表格目录插件等等。

七、Vue富文本编辑器艾特好友

针对一些社交场景，我们还可以在Vue富文本编辑器中@好友功能，从而实现类似微博、微信公众号等的艾特功能。

具体实现方案为，在编辑器中添加@符号，再结合输入框、弹出层等组件实现选择好友的功能，并插入好友的名称和id到富文本中。

八、Vue富文本编辑器支持md么？

在Vue富文本编辑器中，并没有像markdwon那样直接支持md语法编辑，但是我们可以使用一些插件，比如Vue-markdown-editor来实现类似md语法编辑的功能。

九、Vue富文本编辑器内容回显

在Vue富文本编辑器中，我们可以获取编辑器中的html内容，进而实现内容的预览、编辑等功能。

使用Vue富文本编辑器时，可以在组件内部定义一个变量，用来存储编辑器中的内容。在需要编辑和预览的地方，我们可以通过v-html指令将富文本的html内容显示出来，并实现预览和修改功能。

十、Vue富文本编辑器上传图片选取

富文本编辑器上传图片选取是Vue富文本编辑器中比较核心的一个部分，涉及到前端上传、后台存储、图片裁剪等多个环节。

在实现上传图片选取这个功能时，有以下几种实现方式：

使用第三方云存储，比如七牛云等；
使用阿里云等云存储，经过裁剪、压缩等操作后，将上传的图片存储在云端；
前端使用FormData，后台借助java、node.js等技术将图片上传到文件服务器上，再返回图片的url地址，前端再将此url地址添加到编辑器中。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/185715.html