tinymce5 使用紀錄

目前有測試過 CKEditor 5 和 Tinymce 5

這兩款都是非常優秀的 所見及所得編輯器 完整度都非常高 💯 💯 💯 

但因為工作上的功能需求,最終選擇了Tinymce ,下方為簡單的紀錄 : 

html

<textarea id="tinymce"></textarea>

<!-- 引入tinymce -->
<script src="tinymce/tinymce.min.js"></script>

javascript

tinymce配置:

tinymce.init({
    selector: '#tinymce',
    language: "zh_TW",
    menubar: false,
    branding: false,
    //最小高度
    min_height: 500,
    //plugins裡面的paste,使用者如果複製貼上的話,可以過濾css
    plugins: 'imagetools emoticons searchreplace autolink link image media codesample table hr lists advlist codesample code quickbars wordcount paste',
    toolbar1: 'undo redo | fontsizeselect | bold italic underline strikethrough forecolor backcolor| alignleft aligncenter alignright alignjustify | removeformat',
    toolbar2: 'searchreplace | hr emoticons table | bullist numlist | image media custom_embed codesample link',
    //文字大小
    fontsize_formats: '14px 18px 21px 24px 30px 36px 42px',
    //更改tinymce裡面的css
    content_css : "/custom/css/tinymce.css",
    //快速按鈕
    quickbars_insert_toolbar: ' image media custom_embed codesample | hr emoticons',
    //快速按鈕
    quickbars_selection_toolbar: 'bold italic underline strikethrough | link ',
    file_picker_types: 'image',
    //不做網址轉換----如果有用圖片的話滿實用的
    convert_urls: false,
    image_advtab: true,
    //上傳的url
    images_upload_url: '/articleImgUpload',
    automatic_uploads: true,
    //處理圖片
    images_upload_handler: function (blobInfo, success, failure,folderName) {
        if (blobInfo.blob().size > 5000000) {
            failure('錯誤 :' + '圖片請勿超過5M');
            return
        }
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
      
        xhr.open('POST', '/articleImgUpload');
        var token = document.head.querySelector("[name=csrf-token]").content;
        xhr.setRequestHeader("X-CSRF-Token", token);
      
        xhr.onload = function() {
            var json;
          
            if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);

            if (!json || typeof json.imgUrl != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }
            if (json.imgUrl == 'no_login') {
                failure('請登入帳號 !');
                return;
            }
            success(json.imgUrl);
        };
        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        xhr.send(formData);   
    },
    //製作客製化按鈕
    setup: function(editor) {
        editor.ui.registry.addButton('custom_embed', {
            icon: 'sourcecode',
            tooltip: '嵌入程式碼',
            onAction: function (_) {
                tinymce.get('tinymce').windowManager.open({
                    title: '嵌入代碼', // The dialog's title - displayed in the dialog header
                    body: {
                    type: 'panel', // The root body type - a Panel or TabPanel
                    items: [ // A list of panel components
                        {
                            type: 'input',
                            name: 'embedcode',
                            label: '嵌入代碼 :'
                        }
                    ]
                    },
                    buttons: [ // A list of footer buttons
                    {
                        type: 'cancel',
                        text: '取消'
                    },
                    {
                        type: 'submit',
                        text: 'OK',
                        primary: true
                    }
                    ],
                    onSubmit: function (api) {
                        var data = api.getData();
                        tinymce.get('tinymce').execCommand('mceInsertContent', false,data.embedcode+'<br>');
                        api.close();
                    }
                });
            }
        });
    }
// init完成后，回调 : 設定初始值----取得資料的時候滿實用
}).then( resolve=>{
    //先將tinymce內容刪除, 因為如果使用者按回上一步的話會有BUG
    tinyMCE.get('tinymce').setContent("");
    //取得編輯資料
    axios.post('/ArticleData', {
        id: self.id,
    })
    .then(function (response) {
        if (response.data.result == 'success') {
            //把資料庫的資料塞進tinymce裡面
            tinyMCE.get('tinymce').setContent(response.data.data.content)
        }
    })
    .catch(function (error) {
        console.log(error);
    });
});

常用方法 : 

//取得tinymce裡面的html
var content = tinymce.get("tinymce").getBody().innerHTML;
//取得是否有填寫文字
var tinymceLength = tinyMCE.get('tinymce').getBody().innerHTML.replace(/(<([^>]+)>)/ig,"