终于搭建完自己的编辑器了

一直想找一个开源好用的编辑器，支持自定义编辑内容，具有较高自定义内容的编辑器。先后尝试了被百度废弃的开源编辑器UEditor和第三方修改的UeditorPlus,可惜，太过于复杂，也就没用了。直到我看到了知乎上的推荐。这才发现了wangEditor的存在，随后开始研究起来。

随后开始了漫漫研究路。花了将近两个礼拜，跟随文档一步一步走下去，逐渐初步弄懂了搭建的原理和代码。不得不佩服双越老师，十分感谢。

这是wangEditor的官网: https://www.wangeditor.com/

只要部分代码就能创建出一个基础编辑器：

// 创建编辑器
const editor = createEditor({
  selector: '#editor-container'
})
// 创建工具栏
const toolbar = createToolbar({
  editor,
  selector: '#toolbar-container'
})

我在这个基础上添加了自己的功能，包括：

其中用到的上传功能不知道是我理解不够还是编辑器本身的问题，比如下面这段示例代码：

editorConfig.MENU_CONF['uploadImage'] = {
    // form-data fieldName ，默认值 'wangeditor-uploaded-image'
    fieldName: 'your-custom-name',

    // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
    meta: {
        pram1: document.getElementById('CategoryItem').value,
    },

    // 将 meta 拼接到 url 参数中，默认 false
    metaWithUrl: false,
}

我在使用中需要修改配置，让编辑器传送额外的参数，比如编辑器放在那个目录下生成指定的文件名，但是编辑器一旦meta参数设定为某个值的时候

pram1: document.getElementById('CategoryItem').value

后续该值 document.getElementById('CategoryItem').value 发生改变的时候，传递给服务器的参数依然会保持不变,还是原来的那个值。我当时特别想加入作者的qq群，可惜作者说薅羊毛的人太多了，群不让进😂😂😂（我可能就是万千羊毛党之一吧，惭愧惭愧啊。。。这里再次感谢双越老师一下🙏）

还有个疑惑就是，我需要将wangEditor生成的html内容进行格式化，发现推荐的xml-formatter.js差距不是很好用。比如下面这段html：

<p>123<a href="https://www.wangeditor.com/" target="_blank">https://www.wangeditor.com/</a>456</p>

被格式化后就是：

<p>
    123
    <a href="https://www.wangeditor.com/" target="_blank">
        https://www.wangeditor.com/
    </a>
    456
</p>

你会发现，在真正显示后很有可能会导致a标签换行。当然，也有可能是只是我简单地引用 xmlFormatter() 这个函数，并没有深入了解，或许还有其他办法让这个行内a标签不自动换行😇，不管了，我干脆就不换行，要用以后再说，反正又不影响啥，我也不是强迫症患者

wangEditor编辑器很强大，我原先是想用百度的UEditor的，可惜不维护了，界面好复古，丑爆！！！丑得具有百度自己独特的美感💩。好在还有单独开发的UEditorPlus，界面清爽了许多，可是我看了一两个礼拜后，似乎对新手不太友好，反手就舍弃阵地😣，转投知乎给我答案——这才有了wangEditor的应用

这是我部署后的后台个人编辑页面

该说不说，还是符合我审美的。

ok，就这样。

再次感谢双越老师！