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