详解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 相关文章推荐
浅谈javascript 面向对象编程
Oct 28 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
layui使用label标签的方法
Sep 14 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
php实现单链表的实例代码
2013/03/22 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
Python如何实现FTP功能
2020/05/28 Python
基于Python绘制个人足迹地图
2020/06/01 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
体育学院毕业生自荐信
2013/11/03 职场文书
新学期决心书
2014/03/11 职场文书
三八节主持词
2014/03/17 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
鲁迅故居导游词
2015/02/05 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers