TinyMCE 4 使用

之前使用 CKeditor 作為網頁編輯器,這兩天想要一個〝拖曳圖檔到編輯區套用 base64〞的效果,搞了快一天後沒啥進度後,轉到 TinyMCE 之後,Google 一小下就完成了…

官網: TinyMCE

設定參數及說明在 Configuration 頁面,

停止連結樣式轉換

預設會將連結網址從 “/?a=Test” 修改為 “?a=Test” ,也就是會自動修正 server name ,不過這種自動通常都很出錯可以關閉

複製 Word 貼上時保留格式

100% 開放 HTML 以及 JavaScript

如此就可以在編輯區使用所有 HTML Tag 以及切換到原始碼輸入 JavaScript 代碼

 

使用 CodeMirror 優化原始碼編輯

 

本來原始碼編輯長這樣,沒空白、沒縮行,修改起來非常痛苦

改用 CodeMirror 之後長這樣

自訂 CodeMirror

不使用 TAB 縮排、縮排四個空格、啟用 Tag 對應、啟用折疊功能、開啟行數顯示

 

撰寫 <script> 時關閉自動增加 <p>

實際應用案例

自訂預設選項

CKeditor 有 config.js 的預設設定檔可使用,不過 TinyMCE 4 並無類似的設定 (至少還沒發現),參考 TinyMCE – jQuery Plugin, setting a default Theme/Options Globally 之後得到以下寫法

 

讓編輯區的樣式和前台一致

 

316 total views, 1 views today

發表迴響

你的電子郵件位址並不會被公開。