详解Vue基于vue-quill-editor富文本编辑器使用心得


Posted in Javascript onJanuary 03, 2019

vue-quill-editor的guthub地址 ,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧!

那么我们直击正题,在vue中使用quill呢,我们需要npm进行安装,安装命令如下:

npm install vue-quill-editor

再安装依赖项

npm install quill

使用:

在main.js中进行引入

import Vue from 'vue'
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)

下面的css一定还要引用,否则编辑器将会没有css。

在vue页面中代码如下:

<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>
  <button v-on:click="saveHtml">保存</button>
 </div> 
</template>

<script>
export default {
 name: 'App',
 data(){
  return {
   content: `<p>hello world</p>`,
   editorOption: {}
  }
 },computed: {
  editor() {
   return this.$refs.myQuillEditor.quill;
  },
 },methods: {
  onEditorReady(editor) { // 准备编辑器
  },
  onEditorBlur(){}, // 失去焦点事件
  onEditorFocus(){}, // 获得焦点事件
  onEditorChange(){}, // 内容改变事件
  saveHtml:function(event){
   alert(this.content);
  }
 }
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

其中的v-model就是我们自己的html代码,你可以将这个html直接放到数据库,这样也就没有什么问题了。如果想要禁用编辑器可以通过以下代码:

onEditorFocus(val,editor){ // 富文本获得焦点时的事件
  console.log(val); // 富文本获得焦点时的内容
  editor.enable(false); // 在获取焦点的时候禁用
 }

主题设置

在vue项目中,具体引入Quill的文件中,需要使用哪种主题就写哪个。默认是snow主题的。

data(){
  return {
   content: `<p>hello world</p>`,
   editorOption: {
    theme:'snow'
   }
  }
 }

工具栏设置

modules:{
   toolbar:[
    ['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
    ['blockquote', 'code-block'],  //引用,代码块
 
 
    [{ 'header': 1 }, { 'header': 2 }],  // 标题,键值对的形式;1、2表示字体大小
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],  //列表
    [{ 'script': 'sub'}, { 'script': 'super' }], // 上下标
    [{ 'indent': '-1'}, { 'indent': '+1' }],  // 缩进
    [{ 'direction': 'rtl' }],    // 文本方向
 
 
    [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],  //几级标题
 
 
    [{ 'color': [] }, { 'background': [] }],  // 字体颜色,字体背景颜色
    [{ 'font': [] }],  //字体
    [{ 'align': [] }], //对齐方式
 
 
    ['clean'], //清除字体样式
    ['image','video'] //上传图片、上传视频
 
   ]
   },
   theme:'snow'
  }
  }

图片推拽上传

需要安装  quill-image-drop-module 模块,那么改一下imageDrop设置为true,你就可以把你电脑上的图片网上一坨就可以了。

import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill' //引入编辑器
import { ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop', ImageDrop);
export default {
 name: 'App',
 data(){ 
  return{
  editorOption:{
   modules:{
   imageDrop:true, 
   },
   theme:'snow'
  }
  }
 }

那上传文件那你就不用想了,你也许想先把图片放上去,其实这个文件托上去就已经是个base64了,等你在前台读数的时候直接decode就好~

详解Vue基于vue-quill-editor富文本编辑器使用心得

图片调整大小ImageResize

return{
  editorOption:{
   modules:{



imageResize: {}
   },
   theme:'snow'
  }
  }

以上就是我对vue-quill-editor的认识, 希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
jQuery filter函数使用方法
May 19 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 #Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 #Javascript
如何使用less实现随机下雪动画详解
Jan 02 #Javascript
详解Vue2 添加对scss的支持
Jan 02 #Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 #Javascript
JS中数据结构之栈
Jan 01 #Javascript
微信小程序自定义导航栏
Dec 31 #Javascript
You might like
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
window.open的功能全解析
2006/10/10 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
videocapture库制作python视频高速传输程序
2013/12/23 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
会计专业应届生自荐信
2014/02/07 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
妇女干部培训方案
2014/05/12 职场文书
火灾现场处置方案
2014/05/28 职场文书
庆国庆活动总结
2014/08/28 职场文书
实习协议书范本
2014/09/25 职场文书
实习介绍信范文
2015/05/05 职场文书
建党伟业的观后感
2015/06/01 职场文书