因为公司的需求，对比了线在很火的几款富文本编辑器，最终选定了quill，他够轻量，拓展性也比较高，除了文档是英文的阅读不方便之外，都很适合公司项目。故整理出来，也方便以后使用。

在网上找了一个中文文档，翻译不全面，不过基本语法已经足够用了。Quill官方中文文档

最终实现效果

安装

// 2.0的版本才支持安装table插件
npm install --save quill@2.0.0-dev.4// table插件 支持新增行（列）、合并行（列）等功能
npm install --save quill-better-table// 支持图片上传，拖拽插入，剪贴板图片插入等拓展功能
npm install --save quill-image-drop-module// 支持图片调整大小插件
npm install --save quill-image-resize-module

使用

<template><div:style="{ minHeight: minHeight + 'px' }":class="['jg-edit', readOnly ? 'hidden-toolbar' : '']"><div class="jg-edit-page"><!-- 新增table时的快捷操作框 start --><div v-show="showChooseTable" class="jg-edit-table-choose"><divv-for="r in chooseRow":key="r"class="jg-edit-table-choose-row":style="{width:((chooseRow * 20) + 20) + 'px'}"><divv-for="c in chooseCol"ref="chooseTableItem":key="c":row="r":col="c":class="['jg-edit-table-choose-col', r + '-' + c]"@mouseover="mouseoverCol(r, c)"@mouseleave="mouseleaveCol(r, c)"@click="clickCol(r, c)"/></div><a-button size="small" @click="showChooseTable = false">取消</a-button></div><!-- 新增table时的快捷操作框 end --><div class="editor" /></div></div>
</template>

js部分

<script>
import Quill from 'quill'import QuillBetterTable from 'quill-better-table' // 可编辑的table
import ImageResize from 'quill-image-resize-module' // 图片位置 以及 改变图片大小
import { ImageDrop } from 'quill-image-drop-module' // 粘贴剪贴板图片Quill.register({'modules/better-table': QuillBetterTable,'modules/imageResize': ImageResize,'modules/imageDrop': ImageDrop
}, true)export default {name: 'Editor',props: {value: { type: String, default: () => '' }, // 传入的htmlminHeight: { type: Number, default: () => 500 }, // 编辑器最小高度readOnly: { type: Boolean, default: () => false } // 只读模式},data() {return {quill: null,options: {theme: 'snow',modules: {toolbar: {container: [[{ 'size': ['small', false, 'large', 'huge'] }],[{ 'header': [1, 2, 3, 4, 5, 6, false] }],['bold', 'italic', 'underline', 'strike'],[{ 'list': 'ordered' }, { 'list': 'bullet' }],[{ 'script': 'super' }],[{ 'indent': '-1' }, { 'indent': '+1' }],[{ 'color': [] }, { 'background': [] }],[{ 'align': [] }],// ['link',['image'],['table']],handlers: {table: () => {this.showChooseTable = !this.showChooseTable}}},// 工具菜单栏配置table: false, // disable table module'better-table': { // 表格设置operationMenu: {items: { // 鼠标右键菜单设置,如将某一项设置false则右键菜单不会显示 如insertColumnRight: falseinsertColumnRight: { text: '右边插入一列' },insertColumnLeft: { text: '左边插入一列' },insertRowUp: { text: '上边插入一行' },insertRowDown: { text: '下边插入一行' },mergeCells: { text: '合并单元格' },unmergeCells: { text: '拆分单元格' },deleteColumn: { text: '删除列' },deleteRow: { text: '删除行' },deleteTable: { text: '删除表格' }},background: {color: '#333'},color: {colors: ['green', 'red', 'yellow', 'blue', 'white'],text: '背景颜色:'}}},imageDrop: true,// 下面是图片的扩展插件（图片支持调整大小）不需要可删掉imageResize: {displayStyles: {backgroundColor: 'black',border: 'none',color: 'white'},modules: ['Resize', 'DisplaySize', 'Toolbar']},keyboard: {bindings: QuillBetterTable.keyboardBindings}},placeholder: '请输入内容'},// 新增table时的快捷操作框showChooseTable: false,chooseCol: 10, // 展示列 个数chooseRow: 10 // 展示行 个数}},watch: {value(newVal) {if (newVal) {this.drawing(newVal) // 解析HTML}}},mounted() {// 初始化编辑器this.onEditorFocus()},cerated() {},methods: {// 新增table时的快捷操作框mouseoverCol(row, col) {this.$refs.chooseTableItem.forEach(array => {const r = array.attributes['row'].valueconst c = array.attributes['col'].valueif (r <= row && c <= col) {array.style.backgroundColor = 'rgba(32, 165, 214, .3)'}})},mouseleaveCol() {this.$refs.chooseTableItem.forEach(array => {array.style.backgroundColor = '#fff'})},clickCol(row, col) {this.quill.getModule('better-table').insertTable(row, col)this.showChooseTable = false},onEditorFocus() {this.quill = new Quill('.editor', this.options)this.drawing(this.value) // 解析HTMLif (this.readOnly) {// 界面不允许编辑this.quill.enable(false)} else {this.quill.on('selection-change', () => {// 我的理解为光标每落在编辑器上将执行if (this.quill.getSelection()) {const { index, length } = this.quill.getSelection()Object.assign(this, {indexCursor: index, // 字符在编辑器的下标lengthCursor: length// 选中的字符长度})}})}},drawing(html) {const delta = this.quill.clipboard.convert({ html })this.quill.setContents(delta)},getHtml() {const html = this.quill.root.innerHTMLreturn html}}
}</script>

因为我想要金山文档那个样式，所以自己写了个样式进行覆盖

.jg-edit {background-color: rgba(0, 0, 0, 0.03);overflow: auto;padding: 60px 0 20px;height: 100%;&-page {width: 840px;min-height: 100%;background: #fff;padding: 80px 100px;margin: 0 auto;box-shadow: 0 2px 4px 0 #e2e6ed;&::before {content: " ";display: block;position: absolute;background: #fff;height: 42px;width: 100%;left: 0;right: 0;top: 0;box-shadow: 0 2px 4px 0 #e2e6ed;z-index: 2;}.ql-toolbar {position: absolute;width: 840px;top: 0;border: none;left: 50%;margin-left: -420px;z-index: 3;}.ql-container {border: none;min-height: calc(100vh - 290px);.ql-editor {padding: 0;overflow-y: visible;min-height: calc(100vh - 290px);&.ql-blank::before {color: rgba(0, 0, 0, 0.3);left: 0;}.quill-better-table {// margin: 0 auto;}}}.qlbt-col-tool {// justify-content: center;}}&-table-choose {position: absolute;z-index: 2;background: #fff;padding: 8px 8px 5px 8px;box-shadow: 0 2px 4px 0 #e2e6ed;top: 43px;left: 50%;margin-left: 110px;&-row {}&-col {border: 1px solid black;width: 20px;height: 20px;display: inline-block;padding: 0;margin-right: 2px;transition: .3s;&:last-child {margin-right: 0px;}}}&.hidden-toolbar {padding: 20px 0;.jg-edit-page {&::before {display: none;}.ql-toolbar {display: none;}}}
}

vue中使用quill富文本编辑器相关推荐

Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
在Vue中使用Tinymce富文本编辑器+上传图片到七牛
公司官网后台需要做一个上传新闻.公告的功能,自然而然就需要用到了富文本编辑器. UEditor.Simditor.wangEditor.CKEditor.TinyMCE.Quill,这是当前比较热门的 ...
Vue中使用quill富文本
安装 npm install vue-quill-editor --save 挂载 vue-quill-editor 插件全局挂载 import Vue from 'vue' import VueQ ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
vue中使用element-tiptap富文本编辑器
element-tiptap富文本编辑器 npm安装 npm install element-tiptap --save yarn安装 yarn add element-tiptap 全局引入 imp ...
在Vue中使用CKEditor5富文本编辑器
在项目中遇到富文本编辑器需要实现粘贴图片的功能,使用场景:如用户在其他地方截图可以直接在富文本编辑器内粘贴. 找了一圈市面上开源免费的富文本编辑器,最后选中CKEditor.ckeditor doc ...
Vue 中使用 Tinymce 富文本编辑器
参考链接:https://www.cnblogs.com/wisewrong/p/8985471.html Tinymce : 从 word 粘贴过来还能保持绝大部分格式的编辑器一. 下载 npm ...
vue quill富文本编辑器上传图片遇到的坑
在使用quill富文本编辑器上传图片的时候,很多地方都是成功的,但是唯有一处,上传图片总是失败,由此后端的朋友就说可以html标签转换成JSON字符串上传上去,展示的时候在转换回来,即可解决问题. 由 ...

vue中使用quill富文本编辑器

最终实现效果

安装

使用

vue中使用quill富文本编辑器相关推荐

最新文章

热门文章