轻量级富文本vue-quill-editor，已处理防范xss攻击。

一、安装依赖。

npm install vue-quill-editor --save

二、使用。//不要再main.js引入哈，富文本在项目中很少访问的。

使用组价：

<quill-editorref="myQuillEditor"v-model="content":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@ready="onEditorReady($event)"/>

引入组件和样式：

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {components: {quillEditor}
}

变量：

    data () {return {content: '<h2>I am Example</h2>',editorOption: {// Some Quill options...}}},

事件：

methods: {onEditorBlur(quill) {console.log('editor blur!', quill)},onEditorFocus(quill) {console.log('editor focus!', quill)},onEditorReady(quill) {console.log('editor ready!', quill)},onEditorChange({ quill, html, text }) {console.log('editor change!', quill, html, text)this.content = html}
},

三、其他配置。

1.修改样式，将英文改成中文。

如下案例，只修改了部分的英文，下拉框弹窗等等的一些英文还需要自己手动检查一下他的伪类元素，替换掉content的值就可以修改到了。

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: "14px";
}/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {content: "10px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {content: "18px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {content: "32px";
}/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: "文本";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {content: "标题1";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {content: "标题2";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {content: "标题3";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {content: "标题4";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {content: "标题5";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {content: "标题6";
}/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {content: "标准字体";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {content: "衬线字体";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {content: "等宽字体";
}

不同创建的项目，有些不需要添加/deep/哈。

2.如何删除一些不需要的功能，简化界面。

通过配置editorOption，我们可以将自己需要的工具添加到富文本的工具栏中。

代码：

        editorOption: {placeholder: '',modules: {toolbar: [['bold', 'italic', 'underline'], // 加粗，斜体，下划线[{'list': 'ordered'}, { 'list': 'bullet' }], // 列表[{ 'align': [] }], // 对齐方式// [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小// [{ 'font': [false, 'serif', 'monospace'] }] // 字体]}},

效果图：

如果要处理粘贴到富文本的图片，上传到服务器并替换，请参考以下文章：

vue使用富文本编辑器:vue-quill-editor粘贴图片+图片上传服务器+预览图片_xuxuan1997的博客-CSDN博客_quill粘贴图片

vue 轻量级富文本vue-quill-editor相关推荐

Vue轻量级富文本编辑器-Vue-Quill-Editor
先看效果图:女神镇楼下载Vue-Quill-Editor npm install vue-quill-editor --save 下载quill(Vue-Quill-Editor需要依 ...
现代化富文本编辑器 Quill Editor
介绍近期在弄富文本编辑器相关的内容,其中项目中使用了 Quill Editor(后面简称 Quill).Quill 自称是一个现代化强大的富文本编辑器,它与其它富文本编辑器(例如 UEditor)不 ...
vue+summernote富文本编辑器
vue+summernote富文本编辑器最近项目中有新增编辑报告的需求需使用富文本编辑器,在网上找了几篇相关博客,于是选择了summernote ,summernote是一款轻量级的富文本编辑器,比 ...
使用vue的富文本编辑器操作
使用vue的富文本编辑器操作 vue的富文本编辑器使用以及多图片文件上传与回显一. vue-quill-edit 1. 安装vue的富文本 cd 当前的vue项目路径 npm install qui ...
tinymce富文本vue使用教程
tinymce富文本vue使用教程一.资源下载二.下载中文语言包三.初始化富文本信息四.扩展插件五.其他注意六.tinymce一些功能配置七.图片上传(个人整理图片上传两种方式) 八.封 ...
vue项目+富文本编辑器ueditor - 资源篇
资源地址: git源码 · 解说地址 git源码:源码下载地址 · [基于 vue-cli 2.x 的完整 DEMO] ueditor插件Demo演示地址说明: 支持 vue-cli 2.x 支持 ...
UEditor +数学公式+ Vue+ Kityformula 富文本编辑器嵌入数学公式的实现
UEditor +数学公式+ Vue + Kityformula 富文本编辑器嵌入数学公式的实现首先展示一下代码实现后的效果: 现在我们开始写代码第一步:我们需要去下载Ueditor官方的包:Ue ...
vue v-html 富文本图片附件前图标显示问题
vue v-html 富文本图片溢出,解决图片溢出问题之后会出现附件的图片也是100%显示如图所示:附件前面的图片也是100% 解决方案:给富文本中所有图片增加 class 富文本 JavaScri ...
vue tinymce富文本设置图片宽度最大100%
vue tinymce富文本设置图片宽度最大100% 一.效果没有加样式前的图片显示加了之后二.实现方法控件配置中添加自定义内容样式 //自定义样式 defaultSetting: {con ...

vue 轻量级富文本vue-quill-editor

一、安装依赖。

二、使用。//不要再main.js引入哈，富文本在项目中很少访问的。

三、其他配置。

vue 轻量级富文本vue-quill-editor相关推荐

最新文章

热门文章