在使用ElementUI的JSP项目中，集成富文本编辑器QuillEditor

1.莫名其妙：引入QuillEditor的三种方式

项目中需要使用QuillEditor富文本的三种方式,

①如果单独的在JSP中使用是没什么问题的（参考Quill的官方文档，巴拉巴拉的也应该没有什么问题），

②如果是单独的ElementUI项目，import引入组件应该也没有什么问题，

以上两种方式在Quill的官方文档都有详细的介绍。

③接下来介绍的就是在JSP和ElementUI的项目中引入（完成从①到②的过度）。

本以为在JSP中集成了ElementUI（Vue）后，剩余的问题看看官方文档基本就搞定了。奈何一坑接一坑（非主流操作不建议尝试，遇到问题太难定位）。

问题就出在JSP和ElementUI的混搭项目中，Quill按照原始的引入方式引入后，可以显示富文本框但是工具栏按钮都没有效果。

2.解决思路：如何在JSP中引入第三方Vue组件

猜测可能的原因：原始的Quill引入和ElementUI有冲突。解决思路就是将Quill以原始的方式引入为ElementUI的组件（③=以①引入+以②使用））。

在Vue的文档中只介绍了自定义组件和import导入组件，显然不能解决目前的问题，那就看Quill的文档果然有收获，发现了vue-quill-editor.js，这正是第二种方式引入的组件。

那么如何通过第一种方式引入呢？

①第一步：引入JS和CSS

<link href="${pageContext.request.contextPath}/quill/quill.snow.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/quill/quill.bubble.css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath}/quill/quill.min.js"></script>

<%-- 上面的是①引入，下面这个是②引入的关键 --%>

<script type="text/javascript" src="${pageContext.request.contextPath}/quill/vue-quill-editor.js"></script>

②第二步：通过全局方法 Vue.use() 使用插件

Vue.use(window.VueQuillEditor);

 components: {
     //IE兼容写法
     VueQuillEditor:VueQuillEditor,
 },

VueQuillEditor是vue-quill-editor.js中定义的模块。这两个是重点，相当于import引入

③使用quill-editor组件

<quill-editor
            v-model="eidtorContent"
            ref="myQuillEditor"
            :options="editorOption"
            :style="{ height: '70%',width: '100%' }" >
</quill-editor>

3.总结

刚开始用Vue，就被迫使用这种野蛮的方式我很难受。总之忙了一天把富文本集成成功，辛苦没有白费，其他的第三方组件也可以借鉴这种思路引入。

----------------------------------------------------------------------------------------

曾经浪迹天涯，只为寻找本心；如今吾虽浪迹天涯，却未迷失本心。