tinymce富文本图片上传插件的编写

一段时间木有出东西了，一来是因为懒，二来，emmmmm还是因为懒，不，是没有灵感。

-----------------------------------------华丽丽的分割线--------------------------------------

    前段时间，公司因为业务，需要新写一个后台，其中涉及到文章页的编辑，不可避免地需要使用富文本编辑器，之前的后台使用的是百度的编辑器，考虑到其年久失修，还鬼死重，大佬一声令下，改用了tinymce，好处嘛，不说了，用过的都知道~~不过遇到个问题官方提供的插件里没有找到合适的本地图片上传插件。第一时间上网找，也有很多，不过大多是整个插件都重写了，重新写弹框浮层，确定取消按钮或者关闭按钮，重新命名样式类重写样式。同时，小的还发现，官方自带的弹框，是可以鼠标拖拽移动的。emmmmmmmm，各种纠结后决定，自己捣鼓一个吧，沿用官方组件的实现形式，尽量让组件“原汁原味”
    项目中的源码已经推送到github，先来看下插件效果

image
    开始之前，得先酝酿下原来官方组件是怎么组织的，结构如下： image.png
每个组件都包含三个文件，逻辑代码写在plugin.js中，index.js是负责将其require进来的。再来看下具体某个组件是怎么被添加到编辑器的，这里主要看第5行，先获取插件管理器，然后在最后（107行）把它add进去，另外的关键代码段是打开一个操作弹框的时候，内容的定义 image.png
对应打开的锚点窗口 image.png
因为做了语言转换，title的Anchor就是弹框中的标题“锚点”，因为这个是官方的组件，类型协商textbox，会对应生成相应的布局内容，至于我们编写的时候需要怎么插入弹框中的内容，这里就不再细说期间的各种搜索yy了，直接上结果：
image.png
关键代码段如下：

import style from "./css/style.js";
function open (editor) {

        editor.windowManager.open({
            title: "本地图片上传",
            width: 500,
            height: 400,
            html: `
                ${style}
                <div class="mce-box-content" id="mceBoxContent">
                    <label class="add-img">
                        <input type="file" id="imgFile" name="file" multiple="multiple" hidden>
                    </label>
                </div>
            `,
            buttons: [{
                text: 'Ok',
                subtype: 'primary',
                onclick: function (e) {
                    pluginAPI.uploadpic(editor, imgList, tinyMCE.activeEditor.getParam('imageupload_url'), tinyMCE.activeEditor.getParam('imageupload_converCb'));
                    editor.windowManager.close();
                }
            }, {
                text: 'Close',
                onclick: function () {
                    editor.windowManager.close();
                }
            }]
        });
    };

因为自行添加的对话框内容涉及到一些样式，在不修改原本tinymce的样式文件的前提下，小的采用了将css写到js文件中impoer出去的方式来添加样式，最后追加到html字段中。假设样式文件是style.js，编码类似如下：

export default `
<style>
    .mce-box-content {
        width: 100%;
        height: 100%;
        padding: 10px;
        white-space: normal;
        box-sizing: border-box;
        overflow: auto;
        font-size: 0;
    }

    .mce-box-content::-webkit-scrollbar {
        width: 8px;
        height: 1px;
    }
</style>
`

另外，因为使用了自带的弹框，html字段中的内容只能控制弹框里面的内容，所以弹框的确认取消按钮的事件响应需要还是需要在open函数中配置，即上述代码段的buttons字段。还有一点需要注意的是插件的命名，特别是如果把写好的插件发布到npm上通过安装来使用的时候，需要忽略tinymce的前缀，比如小的取的名字是tinymce-imageupload，使用的时候需要写成imageupload，具体如下：

image.png

    以上便是对tinymce插件的研究以及编写自己的插件需要注意的点。至于图片上传的实现，小的主要是基于FormData对象来做的，具体可以参考源码，需要注意的是因为是上传图片的插件，不可避免地需要处理在图片上传成功后怎么处理后端响应的问题，因为不同的后端实现返回的响应数据的结构各不相同，为了兼容，在实现插件的过程中可以加个转换函数，用以适配各种不同的响应数据。用户在使用的时可以在初始化tinymce的时候通过添加对应的字段，根据后端返回数据的实际情况，配置转换函数。比如，小的在插件中对外新加的字段就是imageupload_converCb。
    因为这个项目不打算引入jquery，所以小的在实现上使用的是原生dom的操作，遇到的一个比较麻烦的问题是，小的在图片选择预览框中想要加入拖拽排序，想想用原生api去做就脑壳疼【手动捂脸】x2，emmmmmmm 这个需要好好酝酿下，后期插件更新的时候加上，或者小的实在憋不住了，偷偷引一个jquery也是可能的，哈哈哈哈哈哈。小的水平大概也就这样了，文中写的不对的，还请大佬们指正。
    最后附上项目源码地址：https://github.com/x-shadow-x/tinymce-imageupload 喜欢的小伙伴欢迎star。
    另外这个插件小的也发布到npm了，需要的小伙伴可以直接安装：
    npm install tinymce-imageupload --save-dev