Vue-Quill-编辑富文本编辑器的使用教程

本文为大家分享了武奎尔编辑富文本编辑器的具体使用方法，供大家参考，具体内容如下

先看效果图：

1、下载羽毛笔编辑

新公共管理安装vue-quill-editor - save2，下载奎尔（武-奎尔-编辑需要依赖)

新公共管理安装套筒轴-保存3,代码

template div class=' edit _ container ' quill-editor v-model=' content ' ref=' myQuillEditor ' : options=' editor option ' @ blur=' oneditorbrur($ event)' @ focus=' onEditorFocus($ event)' @ change=' onEditorChange($ event)'/quill-editor/div/templatescriptimport { quillEditor } from ' vue-quill-editor '；//调用编辑器导入奎尔/区/奎尔。核心。CSS '；导入奎尔/区/奎尔。下雪了。CSS '；导入奎尔/区/奎尔。泡泡。CSS”；导出默认{ components: { quillEditor }，data(){ return { content : ` p/ppbr/pollistrongemOr在此拖动/粘贴图像/em/strong/Lili strong EMR ew/em/strong/Lili strong EMR rete/em/strong/Lili strong emytrytr/em/strong/Lili strong emu ytu/em/strong/Li/ol `，editorOption: { }，methods: { onEditorReady(编辑器){ //准备编辑器}，oneditorbrur(){ }，//失去焦点事件onEditorFocus(){}，//获得焦点事件onEditorChange(){}，//内容改变事件}，计算出： { editor(){ return this .参考文献。myquilleditor。羽毛笔；}，}}/scriptOK，搞定，简洁的富文本编辑器就展现在你眼前了，另外附上原料药。羽毛笔编辑

4、存储及将数据库中的数据反显为超文本标记语言字符串

后台接收到数据后会将字符中的标签进行转码，所以我们要先进行一个解码的操作让他变成标签形式的字符串：例如后台接收的数据如下：' h1title '，对应解码后就是“h1title/h1”。

//把实体格式字符串转义成超文本标记语言格式的字符串升级html(str){ str=str。替换(///g ' ')；str=str。替换(///g ' ')；返回字符串；}然后将返回值赋值给对应的参数：

QL编辑器{str}}/div上面的潜艇用热中子反应堆(海底热反应堆的缩写)就是转码函数返回的值，我们要先在数据中定义，所以我现在将新增跟展示放在一起，代码如下：

模板div class='edit_container '！-新增时输入-quill-editor v-model=' content ' ref=' myQuillEditor ' : options=' editor option ' @ blur=' oneditorbrur($ event)' @ focus=' onEditorFocus($ event)' @ change=' onEditorChange($ event)'/quill-editor！-从数据库读取展示-div v-html=' str ' class=' QL-编辑器“{ str } }/div/div/templatescriptimport { quillEditor }来自vue-quill-editor；//调用编辑器导入奎尔/区/奎尔。核心。CSS '；导入奎尔/区/奎尔。下雪了。CSS '；导入奎尔/区/奎尔。泡泡。CSS”；导出默认{ components: { quillEditor }，data(){ return { content : ` p/ppbr/pollistrongemOr在此拖动/粘贴图像/em/strong/Lili strong EMR ew/em/strong/Lili strong EMR rete/em/strong/Lili strong emytrytr/em/strong/Lili strong emu ytu/em/strong/Li/ol `, str : ' '，editorOption: { }，methods: { onEditorReady(编辑器){ //准备编辑器}，oneditorbrur(){ }，//失去焦点事件onEditorFocus(){}，//获得焦点事件onEditorChange(){}，//内容改变事件//转码升级html(str){ str=str。替换(///g ' ')；str=str。替换(///g ' ')；返回字符串；} }，计算出： { editor(){返回这个.参考文献。myquilleditor。羽毛笔；}，}，mounted(){ let content=' '；//请求后台返回的内容字符串this.str=this。擒纵线(内容)；} }/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。