vue中是使用富文本编辑器vue-quill-edit
之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便
近期项目vue单页面,就使用这个编辑器组件吧!
一、安装 cnpm install vue-quill-editor
二、引入
在main.js引入并注册:
import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor)
三、封装组件:
<template>
<div class="quill_box">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</div> </template>
<script>
import Bus from "../../assets/utils/eventBus"; export default {
data() {
return {
content:'',
editorOption: {
placeholder: "请编辑内容",
modules: {
toolbar: [
["bold", "italic", "underline", "strike"],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ size: ["small", false, "large", "huge"] }],
[{ font: [] }],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[ "image"]
]
}
}
};
},
props:[
'contentDefault'
],
watch:{
contentDefault:function(){
this.content = this.contentDefault;
}
},
mounted:function(){
this.content = this.contentDefault;
},
methods: {
onEditorBlur() {
//失去焦点事件
// console.log('失去焦点');
},
onEditorFocus() {
//获得焦点事件
// console.log('获得焦点事件');
},
onEditorChange() {
//内容改变事件
// console.log('内容改变事件');
Bus.$emit('getEditorCode',this.content)
}
}
};
</script> <style lang="less">
.quill_box{
.ql-toolbar.ql-snow{border-color:#dcdfe6;}
.ql-container{height:200px !important;border-color:#dcdfe6;}
.ql-snow .ql-picker-label::before {
position: relative;
top: -10px;
}
.ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg{position: relative;top:-6px;}
}
</style>
四、引入使用:
<my-editor :contentDefault="contentDefault"></my-editor>
components:{
myEditor:myEditorComponent
},
vue中是使用富文本编辑器vue-quill-edit的更多相关文章
- vue+element-ui 使用富文本编辑器
npm安装编辑器组件npm install vue-quill-editor –save 在components文件夹创建ue.vue组件,如下 ue.vue代码如下: <!-- 组件代码如下 ...
- Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
- Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
- Django后台管理admin或者adminx中使用富文本编辑器
在admin或者adminx后台中使用富文本编辑器 一.建立模型:(安装django-tinymce==2.6.0) from django.db import models from tinymce ...
- flask项目中使用富文本编辑器
flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...
- django-应用中和amdin使用富文本编辑器kindeditor
文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...
- Django使用富文本编辑器
1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如 ...
- 使用富文本编辑器Kindeditor
今天在做需求的时候,遇到有一个字段,需要保存带有格式的内容,决定使用富文本框编辑器Kindeditor来实现,解决方法如下: 登录官网下载控件包: http://kindeditor.net/down ...
- Vue 中使用UEditor富文本编辑器-亲测可用-vue-ueditor-wrap
其中UEditor中也存在不少错误,再引用过程中. 但是UEditor相对还是比较好用的一个富文本编辑器. vue-ueditor-wrap说明 Vue + UEditor + v-model 双向绑 ...
随机推荐
- ldd ldconfig
ldd - print shared object dependencies ldconfig 主要是在默认搜寻目录/lib和/usr/lib以及动态库配置文件/etc/ld.so.conf内所列的目 ...
- 哨兵2 NDVI
shp从国外网站下载的,不是很准确了 数据:COPERNICUS/S2 交流合作请联系:ab000c@163.com
- 实际用到的linux小方法
2019.4.261.解决ssh端中文乱码 (1).查看系统(window)的字符集,在命令行界面顶端空白处,右键->属性->选项 底端查看即可. (2).ssh上查看系统支持的字符集 ...
- C# 反射 Type.GetType()
对于外部调用的动态库应用反射时要用到Assembly.LoadFile(),然后才是获取类型.执行方法等;当用反射创建当前程序集中对象实例或执行某个类下静态方法时只需通过Type.GetType(&q ...
- JAVA锁有哪些种类,以及区别(转)
在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类.介绍的内容如下: 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/悲观锁 分段锁 偏向锁/轻量级 ...
- java网络编程学习之NIO模型
网上对NIO的解释有很多,但自己一直没有理解,根据自己的理解画出下面这个图,有什么不对的地方,欢迎留言指出. 理解是,客户端先与通过通道Channel与连接(注册到服务器端),然后再传送数据,服务器端 ...
- 高级shell 脚本
1.函数 函数是一个脚本代码块,你可以为其命名并在代码中任何位置重用.要在脚本中使用该代码块时,只要使用所起的函数名就行了(这个过程称为调用函数).本节将会介绍如何在shell脚本中创建和使用函数 创 ...
- 在linux和windows用c++编写c接口的动态库
linux 动态的头文件api.h #ifndef _API_H #define _API_H #ifdef DLL_IMPLEMENT #define DLL_EXPORT extern " ...
- MySQL表结构更新规范
以下以新增字段为例,修改.删除.新增表的操作类似: 步骤: 1.PDM(中文名称为产品数据管理(Product Data Management))增加字段,并注明新增字段的注释 2.数据库编写sql语 ...
- 浅谈Tarjan算法
从这里开始 预备知识 两个数组 Tarjan 算法的应用 求割点和割边 求点-双连通分量 求边-双连通分量 求强连通分量 预备知识 设无向图$G_{0} = (V_{0}, E_{0})$,其中$V_ ...