Vue移动端富文本插件vue-quill-edito简单使用

PC端的富文本插件比较好找，这次在移动端的项目中遇到需要富文本编辑内容，找了几款之后，最终觉得vue-quill-edito这款插件相对好用。以下是这款编辑器的简单使用方法，更多API关注Quill官网：https://quilljs.com/docs/quickstart/（外网速度可能较慢）。

富文本编辑插件功能：

       富文本编辑器，它提供少量类似于 Microsoft Word 的编辑功能，是一套HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，通常会使用在发布相关的网页或app中，如论坛相关等。

使用步骤：

 1、项目中安装：

   该插件是依赖于Quill的，但是无需再下载Quill,因为在安装vue-quill-editor时，已经安装了Quill。

npm install vue-quill-editor –save

 2、引入

      2.1、全局引入

//main.js中引入
//引入插件核心文件
import VueQuillEditor from 'vue-quill-editor'
//引入插件样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor);

      2.2、局部引入

//组件中引入
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
//注册子组件
export default {
  components: {
    quillEditor
  }
}

 3、使用

data(){
   return{
        editorHtml:'',
        editorOption:{
		placeholder: "请输入...",
	}
   }
}

editorHtml是富文本的内容（在脚本里可使用this. editorHtml获取到文本框的内容）

editorOption是关于插件的配置，举例：placeholder 是富文本框中默认值

 4、页面效果（默认样式）

上图中富文本获取到的值为:

“

一级标题

二级标题

三级标题

注：图片的src的路径替换成base64编码

若需要将以上格式的代码再重新渲染到html中，则用v-html指令即可。

（v-html不会对内容中的html标签进行转义。相当于innerHTML。）