详解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 validate 中文API 附validate.js中文api手册
Jul 31 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
详解React中setState回调函数
Jun 14 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python中下划线的使用方法
2015/03/27 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
python and or用法详解
2019/06/26 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
游戏商店:Eneba
2020/04/25 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
优纳科技软件测试面试题
2012/05/15 面试题
个人求职信范文分享
2014/01/06 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
小学新课改心得体会
2016/01/22 职场文书
导游词之河北野三坡
2019/12/11 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
Github 使用python对copilot做些简单使用测试
2022/04/14 Python