黑马程序员技术交流社区

标题: 【南京校区】富文本编辑器 [打印本页]

作者: 大蓝鲸小蟀锅    时间: 2019-10-18 17:22
标题: 【南京校区】富文本编辑器
主要的propsdefaultToolbarOptions: [  ['undo', 'redo'],  [{ 'size': this.sizeList }],  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],  ['blockquote', 'divider'],  ['clean', 'formatBrush'],  ['link', 'emoji', 'image'],  ['bold', 'italic', 'underline', 'strike'],  [{ 'color': [] }, {'background': []}],  [{ 'script': 'sub' }, { 'script': 'super' }],  [{ 'indent': '-1' }, { 'indent': '+1' }, { 'align': [] }, { 'direction': 'rtl' }],  [{ 'list': 'ordered' }, { 'list': 'bullet' }]]...// 初始化let toolbarOptions = this.toolbarOptions || this.defaultToolbarOptions基础文本模块的封装
一开始考虑直接在组件中添加/重写模块,分为以下4步:
···  // 1.引入对应的格式类  import Blockquote, {BlockquoteItem} from './editor-blot/blockquote.js'  import Divider from './editor-blot/divider.js'// 2.引入handler  import {undo, redo, insertDivider, copyFormat} from './editor-blot/handler.js'···  init () {        Quill.register('modules/imageResize', ImageResize)        // 3.图标增加        this.addIcons()        // 4.重写/添加格式功能        this.registerFormats()        this.options = {          modules: {            toolbar: {              container: this.$refs.toolbar,              // 5.改写handler              handlers: {                'undo': () => { undo(this.quill) },                'redo': () => { redo(this.quill) },                'divider': () => { insertDivider(this.quill) },                'formatBrush': () => { copyFormat(this.quill, this.copyFormatting) },                'emoji': function () {},                'image': () => {                  this.img.show = true                }              }            },            imageResize: {},            toolbar_emoji: true,            short_name_emoji: true,            textarea_emoji: false,            tooltip: true          },          readOnly: this.readOnly,          placeholder: '请输入内容',          theme: 'snow'        }        this.quill = new Quill(this.$refs.editor, this.options)      },      /* 添加icons */      addIcons () {        let icons = Quill.import('ui/icons')        for (let key in ToolIcons) {          icons[key] = ToolIcons[key]        }      },      /* 注册格式 */      registerFormats () {        // 字号重写        let Size = Quill.import('attributors/style/size')        Size.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px']        Quill.register({          // 字号          'formats/size': Size,          // 段落          'formats/blockquote': Blockquote,          'formats/blockquote-item': BlockquoteItem,          // 分割线          'formats/divider': Divider        })      },
但这样做,存在问题:
为了解决这些问题,最终决定参考github的其他Quill功能模块(如quill-emoji),多一步封装过程,合并格式类和handler,将功能模块化:
1.编写格式类
2.编写模块类,编写对应的handler,并注册到Quill的modules上(模块对应的index.js)
3.使用时,(组件/外部)直接引入模块,并在options设置模块为true
这样一来,即便以后需要实现其他个性化业务,使用者也能用步骤3,简单地引用已有模块。如果需要新的模块,可以编写后在组件引入。
...  // 引入模块  import './quill-tooltip/tooltip-body.js'  import './quill-blockquote/index.js'  import './quill-divider/index.js'  import './quill-undo-redo/index.js'  import './quill-format-brush/index.js'...  init () {        Quill.register('modules/imageResize', ImageResize)        this.addIcons()        this.registerFont()        let toolbarOptions = this.toolbarOptions || this.defaultToolbarOptions        this.defaultOptions = {          modules: {            toolbar: {              container: toolbarOptions,              handlers: {                'emoji': () => {},                'image': () => { this.img.show = true }              }            },            imageResize: {},            toolbar_emoji: true,            short_name_emoji: true,            textarea_emoji: false,            //  设置需要的模块为true,从外部传入模块时,直接设置即可            tooltip: true,            divider: true,            undo_redo: true,            format_brush: true          },          placeholder: '请输入内容',          theme: 'snow'        }        let options = this.options || this.defaultOptions        this.quill = new Quill(this.$refs.editor, options)        this.quill.enable(false)        this.initContent()        if (!this.disabled) {          this.quill.enable(true)        }        this.addEvents()      }





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2