之前使用 CKeditor 作為網頁編輯器，這兩天想要一個〝拖曳圖檔到編輯區套用 base64〞的效果，搞了快一天後沒啥進度後，轉到 TinyMCE 之後，Google 一小下就完成了...
官網： TinyMCE
設定參數及說明在 Configuration 頁面，
--
停止連結樣式轉換
預設會將連結網址從 "/?a=Test" 修改為 "?a=Test" ，也就是會自動修正 server name ，不過這種自動通常都很出錯可以關閉
|
1 2 3 4 5 6 |
tinymce.init({ selector: "#id_Edit_HTML", menubar: false, convert_urls : false, remove_script_host : false }); |
--
複製 Word 貼上時保留格式
|
1 2 |
paste_word_valid_elements: "b,strong,i,em,h1,h2,u,p,ol,ul,li,a[href],span,color,font-size,font-color,font-family,mark", paste_retain_style_properties: "all", |
--
100% 開放 HTML 以及 JavaScript
- TinyMce Allow all Html tag
- TinyMCE disable escaping
- How can I prevent TinyMCE from adding CDATA to <script> tags and from commenting out <style> tags?
如此就可以在編輯區使用所有 HTML Tag 以及切換到原始碼輸入 JavaScript 代碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
tinymce.init({ selector: "#id_Add_HTML", //menubar: false, content_css: "Page/css/custom.css", language: "zh_TW", valid_elements : '*[*]', extended_valid_elements : '*[*]', entity_encoding : "raw", init_instance_callback : function(editor) { // jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will // just remove the escaping and not add it back. editor.serializer.addNodeFilter('script,style', function(nodes, name) { var i = nodes.length, node, value, type; function trim(value) { /*jshint maxlen:255 */ /*eslint max-len:0 */ return value.replace(/(<!--\[CDATA\[|\]\]-->)/g, '\n') .replace(/^[\r\n]*|[\r\n]*$/g, '') .replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '\n') .replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '\n'); } while (i--) { node = nodes[i]; value = node.firstChild ? node.firstChild.value : ''; if (value.length > 0) { node.firstChild.value = trim(value); } } }); }, setup: function (editor) { editor.on('change', function () { tinymce.triggerSave(); }); }, plugins: [ "advlist autolink lists link image charmap preview anchor visualblocks code fullscreen insertdatetime media table contextmenu paste autoresize textcolor fullpage nonbreaking" ], toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image forecolor backcolor ", paste_data_images: true }); |
--
使用 CodeMirror 優化原始碼編輯
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
tinymce.init({ selector: "#id_Edit_HTML", menubar: false, content_css: "Page/css/custom.css", language: "zh_TW", valid_elements : '*[*]', extended_valid_elements : '*[*]', entity_encoding : "raw", codemirror: { indentOnInit: true, // Whether or not to indent code on init. fullscreen: true, // Default setting is false path: 'CodeMirror', // Path to CodeMirror distribution config: { // CodeMirror config object mode: 'application/x-httpd-php', lineNumbers: false }, width: 800, // Default value is 800 height: 600, // Default value is 550 saveCursorPosition: true, // Insert caret marker jsFiles: [ // Additional JS files to load 'mode/clike/clike.js', 'mode/php/php.js' ] }, init_instance_callback : function(editor) { // jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will // just remove the escaping and not add it back. editor.serializer.addNodeFilter('script,style', function(nodes, name) { var i = nodes.length, node, value, type; function trim(value) { /*jshint maxlen:255 */ /*eslint max-len:0 */ return value.replace(/(<!--\[CDATA\[|\]\]-->)/g, '\n') .replace(/^[\r\n]*|[\r\n]*$/g, '') .replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '\n') .replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '\n'); } while (i--) { node = nodes[i]; value = node.firstChild ? node.firstChild.value : ''; if (value.length > 0) { node.firstChild.value = trim(value); } } }); }, setup: function (editor) { editor.on('change', function () { tinymce.triggerSave(); }); }, plugins: [ "advlist autolink lists link image charmap preview anchor visualblocks code fullscreen insertdatetime media table contextmenu paste autoresize textcolor fullpage nonbreaking codemirror" ], toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image forecolor backcolor | code ", paste_data_images: true }); |
本來原始碼編輯長這樣，沒空白、沒縮行，修改起來非常痛苦
改用 CodeMirror 之後長這樣
--
自訂 CodeMirror
不使用 TAB 縮排、縮排四個空格、啟用 Tag 對應、啟用折疊功能、開啟行數顯示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
tinymce.init({ selector: "#id_Edit_HTML", menubar: false, // content_css: "Page/css/custom.css", language: "zh_TW", valid_elements : '*[*]', extended_valid_elements : '*[*]', entity_encoding : "raw", force_br_newlines : false, force_p_newlines : false, forced_root_block : '', paste_word_valid_elements: "b,strong,i,em,h1,h2,u,p,ol,ul,li,a[href],span,color,font-size,font-color,font-family,mark", paste_retain_style_properties: "all", codemirror: { indentOnInit: true, // Whether or not to indent code on init. fullscreen: true, // Default setting is false path: 'CodeMirror', // Path to CodeMirror distribution config: { // CodeMirror config object mode: 'application/x-httpd-php', lineNumbers: true, indentUnit: 4, //匹配括号 matchBrackets: true, //匹配标签 matchTags: { bothTags: true }, indentWithTabs: false, foldGutter: true, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }} }, width: 800, // Default value is 800 height: 600, // Default value is 550 saveCursorPosition: true, // Insert caret marker cssFiles: [ 'addon/fold/foldgutter.css' ], jsFiles: [ // Additional JS files to load 'addon/edit/matchbrackets.js', 'addon/edit/matchtags.js', 'addon/fold/foldcode.js', 'addon/fold/foldgutter.js', 'addon/fold/brace-fold.js', 'addon/fold/xml-fold.js', 'mode/clike/clike.js', 'mode/php/php.js' ] }, init_instance_callback : function(editor) { // jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will // just remove the escaping and not add it back. editor.serializer.addNodeFilter('script,style', function(nodes, name) { var i = nodes.length, node, value, type; function trim(value) { /*jshint maxlen:255 */ /*eslint max-len:0 */ return value.replace(/(<!--\[CDATA\[|\]\]-->)/g, '\n') .replace(/^[\r\n]*|[\r\n]*$/g, '') .replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '\n') .replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '\n'); } while (i--) { node = nodes[i]; value = node.firstChild ? node.firstChild.value : ''; if (value.length > 0) { node.firstChild.value = trim(value); } } }); }, setup: function (editor) { editor.on('change', function () { tinymce.triggerSave(); }); }, plugins: [ "advlist autolink lists link image charmap preview anchor visualblocks code fullscreen insertdatetime media table contextmenu paste autoresize textcolor fullpage nonbreaking codemirror" ], toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image forecolor backcolor | code ", paste_data_images: true }); |
--
撰寫 <script> 時關閉自動增加 <p>
|
1 2 3 4 5 6 7 |
tinyMCE.init({ mode : "textareas", theme : "advanced", force_br_newlines : false, force_p_newlines : false, forced_root_block : '', }); |
--
實際應用案例
- 拖曳圖檔，使用 Base64 儲存 tinyMCE can no longer drag and drop images after upgrading from version 3 to version 4
- ajax 送出前更新 TinyMCE textarea and post form using ajax
- 開啟 autoresize 讓編輯區自動調整
- 設定自動儲存更新
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<label for="id_NOTE">儀器說明 <span id="bbb"></span></label> <textarea class="form-control" name="NOTE" id="id_NOTE" data-validation-engine="validate[required]"></textarea> <script> tinymceOptions = { selector: "textarea", theme: "modern", language: "zh_TW", // 設定正體中文，要先下載語言檔 menubar: false, // 關閉功能列 content_css: "/Component_Front/bootstrap-3.3.5-dist/css/bootstrap.min.css", // 設定 CSS 樣式和 Bootstrap 一致 setup: function (editor) { // 編輯區有更新就儲存更新，確保送出資料一致 editor.on('change', function () { tinymce.triggerSave(); }); }, plugins: [ "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste autoresize" ], //toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", paste_data_images: true }; tinymce.init(tinymceOptions); </script> |
--
自訂預設選項
CKeditor 有 config.js 的預設設定檔可使用，不過 TinyMCE 4 並無類似的設定 (至少還沒發現)，參考 TinyMCE - jQuery Plugin, setting a default Theme/Options Globally 之後得到以下寫法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> // 適用全體設定 TinyMceConfig = { language: "zh_TW", menubar: false, content_css: "/Component_Front/bootstrap-3.3.5-dist/css/bootstrap.min.css", paste_data_images: true }; // 指定對象，及個別設定 TextArea1 = { selector: "textarea" }; // 將設定物件合併 $.extend(true, TextArea1, TinyMceConfig); // 初始化執行 tinymce.init(TextArea1); </script> |
--
讓編輯區的樣式和前台一致
|
1 2 3 4 |
tinyMCE.init({ selector: 'textarea', // change this value according to your HTML content_css : 'Component_Front/bootstrap/css/bootstrap.min.css' }); |
--
2,806 total views, 4 views today