关于实现quill（富文本编辑器）初始化数据时自定义属性被清除的问题

Posted 2023-04-27

参考技术A 因为最近有个需求，在从后台定时获取数据后展示，可以加粗和改变字体颜色，并且支持redo和undo，但不支持编辑文字，其实就是加个富文本但不能编辑。我刚拿到需求想，这不是很简单的需求，但后来发现这就是个坑。。

1、刚一开始，我用了项目原本使用的富文本编辑器 vue-html5-editor ,但发现并不能实现不编辑文字又能改样式，这时的我还没有意识到事情的严重性，以为只是个例，于是我又找了另一款富文本编辑器。
2、 wangeditor 是一款国人开发的富文本编辑器，轻量、强大，但它也不支持不编辑文字又能改样式，于是我觉得我得明白这些编辑器的原理到底是怎样的。
3、在查看了源码后，我终于明白上面的两款编辑器为什么不能不编辑文字又能改样式。上面的编辑器实现原理是根据 contenteditable 这个属性来使一个div变为可编辑状态，并且利用 execCommand 方法实现粗体、字体等一系列样式实现，但这个方法只在div是可编辑状态时可用，所以当我把contenteditable改为false后，execCommand就不管用了，所以才改不了样式。
4、知道了这点后，我明白应该寻找一款不依赖execCommand的富文本编辑器，我找到了 tiptap 和 ckeditor5 。
5、在对这两款进行了一定研究后，我发现了另一问题--它们会清除元素中的自定义属性。

例如这样的数据，会变为这样

这是我不能接受的，我开始了漫长的寻找解决办法之路。

经过了很长时间的看源码--查资料--看源码，终于解决了这个问题。
我使用的是 element-tiptap ，其实直接使用tiptap也可以，但因为我的项目就是使用的element-ui，所以我直接使用了这个库。
首先需要

然后

具体的我就不说了，我主要说自己写的span这个节点

attrs里就是需要保留的属性，parseDOM就是解析dom时所触发的方法，可以在这里获取到属性，在toDOM生成DOM是把这些属性加上。
======================================================================================》

最后我还是使用了quill，因为delta。。。
quill配置如下：

后台的数据处理与实时联动用到了ShareDB和richText
处理数据时使用 wss动态给到delta数据，然后使用setContents显示到页面上

使用text-change监听事件监听文本改动并返回

记录一下。

ATP应用测试平台——关于vue中Vue-Quill-EditorMavon-EditorTinymce等多种富文本编辑器的集成使用

前言

本节我们主要介绍几种在vue项目中使用较为广泛的富文本编辑器，其中主要包括Vue-Quill-Editor、mavon-editor以及tinymce等的集成及使用。源代码依然托管在我们的ATP应用测试平台中，源码地址：https://gitee.com/northcangap/atp，仅供参考使用。富文本编辑器实现效果如下：

正文

• Vue-Quill-Editor

①npm安装Vue-Quill-Editor

命令：npm i vue-quill-editor -s

 ②main.js全局引用vue-quill-editor富文本编辑器

main.js源码

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from '@/router';
import {http} from '@/axios/index';
import qs from 'qs';
import '@/util/derective'
import App from '@/App.vue';
import Print from 'vue-print-nb'
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import TinymceVueH from 'tinymce-vue-h'

Vue.use(TinymceVueH);
// use
Vue.use(mavonEditor);
Vue.use(VueQuillEditor, /* { default global options } */);
Vue.use(VideoPlayer);
Vue.use(Print);
Vue.use(ElementUI);
Vue.prototype.$http = http;
Vue.prototype.$qs = qs;
Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

 ③富文本编辑器使用

 EditorTemplate.vue

<template>
  <div class="container">
    <div class="title">
      <span>富文本编辑器示例</span>
      <el-divider direction="vertical"></el-divider>
      <router-link to="home">
        <span style="font-size: 18px;">退出</span>
      </router-link>
    </div>
    <el-divider>Test Staring</el-divider>
    <div class="content">
      <h3 style="text-align: center;">Vue-Quill-Editor</h3>
      <quill-editor class="editor"
                    ref="myTextEditor"
                    v-model="msg1"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @ready="onEditorReady($event)"
                    @change="onEditorChange($event)">
      </quill-editor>
      <h3 style="text-align: center;">mavon-editor</h3>
      <mavon-editor v-model="msg2"/>
      <h3 style="text-align: center;">tinymce</h3>
      <tinymce-vue-h :init="{tinymceInit}" v-model="msg3"></tinymce-vue-h>
    </div>
  </div>
</template>

<script>

export default {
  name: "EditorTemplate",
  data() {
    return {
      msg1: '',
      msg2: '',
      msg3: '',
      tinymceInit: {
        theme: 'silver', // 必须参数, 否则富文本编辑器无法显示
        skin_url: '@/tinymce/skins/ui/oxide', // 必须参数, 否则富文本编辑器无法显示
        language_url: '/tinymce/langs/zh_CN.js', // 如需中文,则引入
        language: 'zh_CN', // 如需中文,则引入
        content_css: '/tinymce/skins/content/default', // 必须参数
      },
      editorOption: {
        /*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: '请在这里添加产品描述', //提示
        readyOnly: false, //是否只读
        theme: 'snow', //主题 snow/bubble
        syntax: true, //语法检测
      },
      // markdownOption: {
      //   // bold: true, // 粗体
      // },
    }
  },
  methods: {
    // 失去焦点
    onEditorBlur(editor) {
    },
    // 获得焦点
    onEditorFocus(editor) {
    },
    // 开始
    onEditorReady(editor) {
    },
    // 值发生变化
    onEditorChange(editor) {
      this.content = editor.html;
      console.log(editor);
    },
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quillEditor;
    }
  },
}
</script>

<style scoped lang="scss">
.container {
  padding: 10px;

  a {
    text-decoration: none;
  }

  .title {
    font-size: 20px;
    font-weight: bold;
  }
}
</style>

④实现效果：可以编辑文本、图片、视频等多种资源

• mavon-editor

①npm安装mavon-editor

命令：npm i mavon-editor -s

②main.js中全局引入mavon-editor富文本编辑器

 ③mavon-editor组件使用

 ④实现效果：

• tinymce

①npm安装tinymce

命令：npm i tinymce-vue-h -s

②main.js中全局引入tinymce-vue-h富文本编辑器

③使用tinymce-vue-h富文本编辑器

 ④使用效果

结语

本小节到这里就结束了，我们下期见。。。