详解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 相关文章推荐
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
详解如何在Angular中快速定位DOM元素
May 17 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 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中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
使用URL传输SESSION信息
2015/07/14 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
Vue实现验证码功能
2019/12/03 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
以一段代码为实例快速入门Python2.7
2015/03/31 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
python命令行工具Click快速掌握
2019/07/04 Python
Python configparser模块操作代码实例
2020/06/08 Python
使用npy转image图像并保存的实例
2020/07/01 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
全球在线商店:BerryLook
2019/04/14 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
行政总经理岗位职责
2013/12/05 职场文书
晚会主持词开场白
2014/03/17 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
个人安全承诺书
2014/05/22 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
Python find()、rfind()方法及作用
2022/12/24 Python