返回

记录一下在vue-quill-editor富文本插件没有表格时用wangEditor插件遇到的坑

前端

前言
由于产品变更了需求，富文本要可插入表格（他咋不内嵌个word），而原来项目中的富文本插件（vue-quill-editor）并没有此功能，查看了网上的解决方案，大多数都选择了wangEditor。

官网下载包，配置一下就可以用：

npm i wangEditor

<template>
  <div id="editor"></div>
</template>

<script>
import { Editor } from 'wangEditor'

export default {
  mounted() {
    const editor = new Editor(this.$refs.editor)
    editor.create()
  },
}
</script>

.w-e-text-container {
  height: 600px!important;
}

使用上没啥问题，感觉还可以。

遇到的问题
由于产品需求是编辑后内容，需要转换成html存库，供前端解析渲染，但是wangEditor编辑出来的内容会有很多html标签，存库后前端解析时会出现很多冗余代码，前端人员说处理很麻烦，要我优化一下。

于是就看了一下wangEditor导出的html，发现上面有俩个类：hljs和prettyprint，貌似是代码高亮用的，而这个代码高亮是通过复制一个元素的内容到一个新的<pre>元素下，然后给这个<pre>加上hljs和prettyprint的类，并设置overflow:scroll，其实原理就是让代码滚动的时候，不用让编辑器有滚动条，让代码高亮的<pre>元素有滚动条。

源码：

<div class="w-e-text">
  <p>你好</p>
  <p><pre class="hljs prettyprint" style="overflow: scroll;">&lt;div&gt;123&lt;/div&gt;</pre></p>
  <p>你在吗</p>
</div>

处理方法
处理这种问题的方法很简单，把<pre>元素的类去掉就ok了，然后在解析前端的时候，把解析的内容再转换一下即可。

代码如下：

this.editor.config.codeHighlighter = (Prism) => (text, language) => {
      // 自定义代码高亮
      let result = Prism.highlight(text, Prism.languages[language], language)
      return result.replace(/<pre class="hljs prettyprint".*?>/g, '<pre>')
}

总结
从vue-quill-editor换成wangEditor虽然简单，但是处理的坑还是不少的，不过好在问题都不是特别严重，遇到问题解决问题就好了，现在问题解决，开发继续，也希望这篇文章对其他前端人有帮助。