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

一段时间木有出东西了，一来是由于懒，二来，emmmmm仍是由于懒，不，是没有灵感。

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

    前段时间，公司由于业务，须要新写一个后台，其中涉及到文章页的编辑，不可避免地须要使用富文本编辑器，以前的后台使用的是百度的编辑器，考虑到其年久失修，还鬼死重，大佬一声令下，改用了tinymce，好处嘛，不说了，用过的都知道~~不过遇到个问题官方提供的插件里没有找到合适的本地图片上传插件。第一时间上网找，也有不少，不过大可能是整个插件都重写了，从新写弹框浮层，肯定取消按钮或者关闭按钮，从新命名样式类重写样式。同时，小的还发现，官方自带的弹框，是能够鼠标拖拽移动的。emmmmmmmm，各类纠结后决定，本身捣鼓一个吧，沿用官方组件的实现形式，尽可能让组件“原汁原味”
    项目中的源码已经推送到github，先来看下插件效果
    开始以前，得先酝酿下原来官方组件是怎么组织的，结构以下：
每一个组件都包含三个文件，逻辑代码写在plugin.js中，index.js是负责将其require进来的。再来看下具体某个组件是怎么被添加到编辑器的，这里主要看第5行，先获取插件管理器，而后在最后（107行）把它add进去，另外的关键代码段是打开一个操做弹框的时候，内容的定义
对应打开的锚点窗口
由于作了语言转换，title的Anchor就是弹框中的标题“锚点”，由于这个是官方的组件，类型协商textbox，会对应生成相应的布局内容，至于咱们编写的时候须要怎么插入弹框中的内容，这里就再也不细说期间的各类搜索yy了，直接上结果：

关键代码段以下：

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，具体以下：

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