ibms-dome/Frontend/js/yourteam/yourteam.ckeditor5.init.js

var editor = [];
$(function () {
    initCkeditor()
})

/*  --Uplaod Adapater   */
//class MyUploadAdapter {
//    constructor(loader) {
//        this.loader = loader;
//    }
//    // start upload methods
//    upload() {
//        return new Promise((resolve, reject) => {
//            // 使用 FileReader() 物件讀取檔案
//            const reader = this.reader = new window.FileReader();

//            // 觸發錯誤事件，以 reject 丟回 Promise 失敗原因
//            reader.addEventListener('error', err => {
//                reject(err);
//            });
//            // 觸發 abort 事件時，以 reject() ，使 Promise 失敗
//            reader.addEventListener('abort', () => {
//                reject();
//            });

//            // 告訴 FileReader 物件用 url 格式讀取，用於設定 img.src 性質
//            this.loader.file.then(file => {

//                console.log(file)

//                // 觸發 load 事件後，resolve 丟回物件完成 Promise
//                reader.addEventListener('load', () => {
//                    //file.src = reader.result;
//                    let myFile = new BICYCLER.Utility.File();
//                    let myMath = new BICYCLER.Utility.Math();
//                    let strExtName = "", strOrgName = "", strSaveName = ""
//                    strSaveName = myMath.guid().replace(' ', '');
//                    strExtName = myFile.getFileExtension(file.name);
//                    strOrgName = (strExtName === null || strExtName === "") ? file.name : file.name.replace('.' + strExtName, '');

//                    editorImage.push(file)
//                    resolve({
//                        filename: file.name,
//                        orgname: strOrgName,
//                        savename: strSaveName,
//                        extname: strExtName,
//                        size: file.size,
//                        urls: {
//                            default: reader.result
//                        }
//                    });
//                });
//                reader.readAsDataURL(file);
//            });

//            //this.loader.read().then(data => {
//            //    editor.editing.view.change(writer => {
//            //        writer.setAttribute('src', data, viewImg);
//            //    });
//            //});
//        });
//    }
//    // start abort()
//    abort() {
//        //  觸發 FileReader abort 事件
//        this.reader.abort();
//    }
//}

function initCkeditor() {
    return new Promise((resolve) => {
        let toolbar = {
            toolbar: {
                items: [
                    'heading',
                    '|',
                    'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
                    '|',
                    'bold', 'italic', 'underline', 'strikethrough',
                    '-',
                    'alignment', 'numberedList', 'bulletedList',
                    '|',
                    'indent', 'outdent',
                    '|',
                    'link', 'blockquote', /*'ckfinder ,'*/ 'insertTable',
                    '|',
                    'undo', 'redo',
                    '|',
                    'fullScreen'
                ],
                shouldNotGroupWhenFull: true,
                language: "zh",
            },
            image: {
                toolbar: [
                    'toggleImageCaption', 'linkImage',
                    '|',
                    'imageStyle:alignBlockLeft', 'imageStyle:alignCenter', 'imageStyle:alignBlockRight', 'imageStyle:wrapText',
                    "|",
                    'resizeImage:original', 'resizeImage:25', 'resizeImage:50', 'resizeImage:75'
                ],
            },
            table: {
                contentToolbar: ['tableProperties', 'tableCellProperties', 'tableRow', 'tableColumn', 'mergeTableCells']
            },
            //image介面刪除callback
            //imageRemoveEvent: {
            //    additionalElementTypes: null, 
            //    callback: (imagesSrc, nodeObjects) => {
            //        console.log('callback called', imagesSrc, nodeObjects)
            //    }
            //},
            ckfinder: {
                //ckfinder 連接器
                uploadUrl: '/By_Admin/CKfinder/CKfinder/connector?command=Init&type=Images&lang=zh-tw&langCode=zh-tw',
                options: {
                    language: 'zh-tw',
                    resourceType: 'Images'
                }
            }
        }

        $("[data-toggle^=ckeditor]").each((index, value) => {
            //取得原有element class
            let oriWidth = $(value).css("width");
            let oriMaxWidth = $(value).css("max-width");

            ClassicEditor.create(value, toolbar)
                .then(NewEditor => {
                    if ($("[data-toggle^=ckeditor]").length == 1) {
                        editor = NewEditor;

                        //讀進來的Source element disabled時，該CKEditor => enableReadOnlyMode('secret string')
                        if ($(value).prop("disabled") == true) {
                            editor.enableReadOnlyMode('bicycler');
                        }

                        //剪貼簿讀進來不呈現樣式
                        //const plugin = editor.plugins.get('Clipboard');
                        //plugin.on('inputTransformation', (evt, data) => {
                        //    const dataTransfer = data.dataTransfer;
                        //    data.content = editor.data.processor.toView(regexTextToHtml(dataTransfer.getData('text/plain')));
                        //})

                        //上傳照片(非CKfinder)配置UploadAdapter
                        //editor.plugins.get('FileRepository').createUploadAdapter = loader => {
                        //    console.log(editor.plugins.get('FileRepository'))
                        //    return new MyUploadAdapter(loader)
                        //}

                        //放入原有col- class 
                        $(editor.ui.view.element).css("width", oriWidth);
                        $(editor.ui.view.element).css("max-width", oriMaxWidth);

                        resolve();
                    } else {
                        let sub = $(value).data("toggle").split("ckeditor")[1];
                        editor[sub] = NewEditor

                        //讀進來的Source element disabled時，該CKEditor => enableReadOnlyMode('secret string')
                        if ($(value).prop("disabled") == true) {
                            editor[sub].enableReadOnlyMode('2421ww');
                        }

                        //貼上時指文字呈現
                        //const plugin = editor[sub].plugins.get('Clipboard');
                        //plugin.on('inputTransformation', (evt, data) => {
                        //    const dataTransfer = data.dataTransfer;
                        //    data.content = editor[sub].data.processor.toView(regexTextToHtml(dataTransfer.getData('text/plain')));
                        //})

                        //上傳照片(非CKfinder)配置UploadAdapter
                        editor[sub].plugins.get('FileRepository').createUploadAdapter = loader => {
                            console.log(editor[sub].plugins.get('FileRepository'))
                            return new MyUploadAdapter(loader)
                        }

                        //放入原有col- class 
                        $(editor[sub].ui.view.element).css("width", oriWidth);
                        $(editor[sub].ui.view.element).css("max-width", oriMaxWidth);

                        resolve();
                    }
                })
                .catch(err => {
                    console.error(err.stack);
                    resolve();
                });
        })
    })

}

function regexTextToHtml(text) {
    let data = text;
    data = data.replace(/\r/gm, "");
    data = data.replace(/\n\n/gm, "\n");
    data = data.replace(/^/gm, "<p>");
    data = data.replace(/\n|\n\n/gm, "</p>");
    return data;
}

function regexHtmlToText(html) {
    let data = html;
    data = data.replace(/<p>/gm, "");
    data = data.replace(/<\/p>/gm, "\n");
    data = data.replace(/&nbsp;/gm, " ");
    data = data.replace(/&emsp;/gm, "　");
    data = data.replace(/&ensp;/gm, " ");
    return data;
}