基于quill2.0的富文本编辑器，Fluent Editor，支持表格，图片，表情等

官网：Fluent Editor | 基于 Quill 2.0 的富文本编辑器

安装

npm i @opentiny/fluent-editor quill

使用案例

<template><div class="publish-form-container"><!-- TODO  --><div ref="quillEditorRef" class="quill-editor"></div></div></div></template><script>import Quill from 'quill';import 'quill/dist/quill.snow.css';import FluentEditor from '@opentiny/fluent-editor'import '@opentiny/fluent-editor/style.css';export default {name: 'PublishForm',data() {return {title: '',type: '',content: '',};},mounted() {this.initQuillEditor();},methods: {initQuillEditor() {const self = this;this.quillEditor = new FluentEditor(this.$refs.quillEditorRef, {modules: {toolbar: {container:[['undo', 'redo'],[{ font: ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif'] }],['bold', 'italic', 'underline', 'strike'],['blockquote', 'code-block'],[{ header: 1 }, { header: 2 }],[{ list: 'ordered' }, { list: 'bullet' },{ 'list': 'check' }],[{ 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: [] }],[{ align: [] }],['clean'],['link', 'image'],['better-table', 'file', 'emoji'],['undo', 'redo'],],handlers: {'table': function () {this.quill.getModule('better-table').insertTable(3, 3)},},},table:false,'better-table': {operationMenu: {color: {text: '主题色',colors: ['#ffffff', '#f2f2f2', '#dddddd', '#a6a6a6', '#666666', '#000000','#c00000', '#ff0000', '#ffc8d3', '#ffc000', '#ffff00', '#fff4cb','#92d050', '#00b050', '#dff3d2', '#00b0f0', '#0070c0', '#d4f1f5','#002060', '#7030a0', '#7b69ee', '#1476ff', '#ec66ab', '#42b883',]}}},file: true,            // 文件上传'emoji-toolbar': true, // 插入表情 },theme: 'snow',});// 监听编辑器内容的变化this.quillEditor.on('text-change', function (delta, oldDelta, source) {self.content = self.quillEditor.root.innerHTML;});},},};</script>