211 lines
8.3 KiB
JavaScript
211 lines
8.3 KiB
JavaScript
|
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(/ /gm, " ");
|
|||
|
|
data = data.replace(/ /gm, " ");
|
|||
|
|
data = data.replace(/ /gm, " ");
|
|||
|
|
return data;
|
|||
|
|
}
|