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

news2024/12/25 13:32:10

官网：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>