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


Posted in Javascript onSeptember 21, 2018

本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法,供大家参考,具体内容如下

先看效果图:

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

 1、下载Vue-Quill-Editor 

npm install vue-quill-editor --save

2、下载quill(Vue-Quill-Editor需要依赖) 

npm install quill --save

3、代码 

<template>
  <div class="edit_container">
    <quill-editor 
      v-model="content" 
      ref="myQuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
  </div>
</template>
<script>
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
  },
  data() {
    return {
      content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
      editorOption: {}
    }
  },
  methods: {
    onEditorReady(editor) { // 准备编辑器
 
    },
    onEditorBlur(){}, // 失去焦点事件
    onEditorFocus(){}, // 获得焦点事件
    onEditorChange(){}, // 内容改变事件
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  }
}
</script>

OK,搞定,简洁的富文本编辑器就展现在你眼前了,另外附上API。Vue-Quill-Editor

4、存储及将数据库中的数据反显为HTML字符串

后台接收到数据后会将字符中的标签进行转码,所以我们要先进行一个解码的操作让他变成标签形式的字符串:
例如后台接收的数据如下:"<h1>title<"  ,对应解码后就是`<h1>title</h1>`。

//把实体格式字符串转义成HTML格式的字符串
escapeStringHTML(str) {
  str = str.replace(/</g,'<');
  str = str.replace(/>/g,'>');
  return str;
}

然后将返回值赋值给对应的参数: 

<div v-html="str" class="ql-editor">
  {{str}}
</div>

上面的str就是转码函数返回的值,我们要先在data中定义,所以我现在将新增跟展示放在一起,代码如下:

<template>
  <div class="edit_container">
    <!-- 新增时输入 -->
    <quill-editor 
      v-model="content" 
      ref="myQuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
    <!-- 从数据库读取展示 -->
    <div v-html="str" class="ql-editor">
      {{str}}
    </div>
  </div>
</template>
<script>
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
  },
  data() {
    return {
      content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
      str: '',
      editorOption: {}
    }
  },
  methods: {
    onEditorReady(editor) { // 准备编辑器
 
    },
    onEditorBlur(){}, // 失去焦点事件
    onEditorFocus(){}, // 获得焦点事件
    onEditorChange(){}, // 内容改变事件
    // 转码
    escapeStringHTML(str) {
      str = str.replace(/</g,'<');
      str = str.replace(/>/g,'>');
      return str;
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  mounted() {
    let content = ''; // 请求后台返回的内容字符串
    this.str = this.escapeStringHTML(content);
  }
}
</script>

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
javascript中的继承实例代码
Apr 27 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
vue cli 全面解析
Feb 28 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 #Javascript
vue-rx的初步使用教程
Sep 21 #Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 #Javascript
Vue中插入HTML代码的方法
Sep 21 #Javascript
node.js调用C++函数的方法示例
Sep 21 #Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 #Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 #Javascript
You might like
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
PyTorch中的C++扩展实现
2020/04/02 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
python 实现单例模式的5种方法
2020/09/23 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
RealTek面试题
2016/06/28 面试题
链表面试题-一个链表的结点结构
2015/05/04 面试题
劳模事迹材料范文
2014/12/24 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
同事欢送会致辞
2015/07/31 职场文书
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python