详解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中的Array对象使用说明
Jan 17 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 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中PDO基础教程 入门级
2011/09/04 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
php实现登录页面的简单实例
2019/09/29 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
Python 的描述符 descriptor详解
2016/02/27 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
opencv实现简单人脸识别
2021/02/19 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
Python绘制数码晶体管日期
2021/02/19 Python
微博营销计划书
2014/01/10 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
出生证明公证书
2014/04/09 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
夏季药店促销方案
2014/08/22 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
大学生学期个人总结
2015/02/12 职场文书
python热力图实现的完整实例
2022/06/25 Python