关于MediumEditor的调研

[NanQi]

我准备做PC版的文章编辑功能，使用字里行间的PC版编辑器觉得挺顺手，大致看了一下，就发现了MediumEditor这个开源组件。 Medium基本是没有使用过的，之前偶尔会从外链中跳过去，也知道EOS官网放弃steem使用medium，这次也算专门注册，然后使用体验。 期间配合使用了medium-editor-insert-plugin扩展，但是第二空间的需求稍稍有点出入，肯定是需要做修改的。 我在做完简单的调研工作后，确定了可行性，之后把任务分给了解瑞明，可解瑞明做了3天时间，距离我的目标偏差甚大，他并没有以扩展和配置的思路来解决问题，而是想着如何修改源码达到目的，我也甚是无语。 主要的修改包括选择文字在弹出的toolbar中，只需要加粗，加大，引用三个功能，其次就是对于insert button的扩展了，传图片需要上传到七牛，而视频需要支持本地选择，还需要增加音乐，标题，引用，分割线等其他元素。 刚开始在处理toolbar时，一直的想法都是使用H3做字体加大，把选择部分的加粗变成整段的加粗，解瑞明告诉我通过修改源码的办法可以做到，却很是麻烦，在最外层增加b标签，还得判断是否有b标签等等。 我使用MediumEditor的扩展来实现此功能，调用端只需要写如下代码：

        var editor = new MediumEditor('.editable', {
            extensions: mylineExtension,
            buttonLabels: 'fontawesome',
            toolbar: {
                allowMultiParagraphSelection: false,
                buttons: [
                    'myline-bold',
                    'myline-size',
                    'quote'
                ]
            }
        });

至于一个扩展按钮，那更是简单：

var BoldButton = MediumEditor.extensions.button.extend({
    name: 'myline-bold',
    aria: '加粗',
    useQueryState: true,
    contentDefault: '<b>B</b>',
    contentFA: '<i class="fa fa-bold"></i>',

    handleClick: function (event) {
        var parentNode = MediumEditor.selection.getSelectedParentElement(MediumEditor.selection.getSelectionRange(this.base.options.ownerDocument));
        $(parentNode).toggleClass('myline-bold')
    },
})

主要的功能实现只是一步toggleClass('myline-bold')，但是扩展的写法和取到选择段落的dom元素却是得多看文档和源码才能做到。

至于mediumInsert的CustomAddon，在官网可是有示例代码的，直接拷贝过来便是，添加分割线很是简单：

    CustomAddon.prototype.add = function () {
        var $place = this.$el.find('.medium-insert-active');

        $place.html("<hr>");
        this.core.moveCaret($place.next());
        this.core.hideButtons(); 
    };

我却是连template也不用写的。 title和quote确实稍稍复杂，主要原因是不知道如何在点击以后存在样式却没有内容，光标还在里面。后来看了字里行间的做法，是增加了一个ul，也着实有意思：

    CustomAddon.prototype.add = function () {
        var $place = this.$el.find('.medium-insert-active');

        var ul = $('<ul />', {
            class: 'ul-title'
        });
        var li = $('<li />');

        ul.append(li);

        $place.html(ul);
        this.core.moveCaret(li);

        this.core.hideButtons();
    };

自此，基本所有的功能均已调研完成，剩下的只有一步步完善。