2018-8-7 Quill 编辑器取值为空的解决方法

2个 quill 编辑器的 ID 冲突了

2018-8-7 Quill 编辑器取值为空的解决方法

遇到的问题

quill.root.innerHTML 总是返回空的内容。

结论

因为页面上有2个编辑器(一个 PC 端一个移动端)
然后编辑器的 HTML id 冲突了。
把其中一个编辑器的 ID 改一下就好了。注意包裹 HTML 元素 ID 也不能一样。

我俩都用了 #editor 没注意就冲突了。
在 Console 里查看 Quill 的 root 元素觉得不对劲。就试了一下。果然是这个问题。

备注

我用的是 Vue.js 单页应用。因为桌面端编辑器和移动端的界面不一样。就分开两个组件写了。

桌面端编辑器一开始用的是 tui.editor,后来发现实在没法忍。太难定制了。
后来做移动端的时候就换成了 quill。
然后要把桌面端也换成 quill 的时候出现了这个问题。
<template> 里的 HTML ID 冲突了。