HTML編輯器自己做！布丁版TinyMCE編緝器 / An Online HTML Editor: Customized TinyMCE Editor

8月 31, 2017 程式語言/JavaScript , GitHub , JavaScript , Programming/JavaScript , Service/GitHub , Work , Work/Widget 24 Comments Edit Copy Download

說到編輯HTML的編輯器，你會想到那個工具呢？純寫程式碼用的Sublime Text、Notepad++？給不會程式碼用的Word轉存HTML格式？混合編輯的Dreamweaver？真要我說的話，目前我看過最好、最乾淨、各種編輯器之間轉換最漂亮的編輯器，就是TinyMCE。

TinyMCE一般只是作為網站裡面將<textarea>轉變為所見即得編輯器的小工具，能像是編輯Word一樣地編輯HTML網頁，最後產生的HTML程式碼又乾淨又漂亮。我因為太常使用TinyMCE來編輯HTML網頁程式碼，特別是表格的編輯，所以乾脆索性把TinyMCE做成獨立的布丁版TinyMCE編輯器，讓人需要的時候就直接打開網頁、使用TinyMCE編輯網頁吧。

• 布丁版TinyMCE編輯器：https://pulipulichen.github.io/TinyMCE-Online-Editor/

布丁版TinyMCE編輯器 / Customized TinyMCE Editor

• 開新視窗：布丁版TinyCE編輯器

程式碼 / Code Repository

布丁版TinyMCE編輯器的原始碼都放在GitHub上，有需要的人可以用fork建立分支，或是直接下載所有程式碼。布丁版TinyMCE編輯器完全是在客戶端的瀏覽器上執行，不需要後端伺服器或特別的環境，建議使用Google Chrome執行。

• GitHub儲存庫：https://github.com/pulipulichen/TinyMCE-Online-Editor

功能 / Features

布丁版TinyMCE編輯器增加了原本TinyMCE沒有的功能，概述如下：

開啟檔案 / OPEN

可以載入本地端電腦上的HTML、txt等純文字檔案。

開新檔案 / NEW

可建立空白的新檔案。

預覽網頁 PREVIEW

可開啟預覽視窗。在TinyMCE上編輯的結果會直接呈現在預覽視窗上。操作畫面如下圖所示：

複製HTML原始碼 / COPY HTML

可直接複製TinyMCE編輯器產生的HTML原始碼。TinyMCE產生的HTML表格非常好用且漂亮，不論是Word貼過來、Excel、Google文件貼過來、或是從TinyMCE貼到其他地方，轉換結果都相當完美。這點是我很欣賞TinyMCE的地方。

儲存檔案 / SAVE

可以將編輯結果儲存成單一檔案，格式可選擇HTML網頁 (*.html)，可以用瀏覽器或Word開啟。或是可以存成OpenDocument Text開放文件格式 (*.odt)，使用LibreOffice開啟。

即時儲存 / Auto-Save

所有編輯的內容都會即時儲存在您瀏覽器中。即使不小心關閉視窗，下次開啟布丁版TinyMCE編輯器的時候，它會自動載入您上次編輯的內容。

網址載入 / Load Parameters from URL

布丁版TinyMCE編輯器接受使用網址的GET參數來載入預設的內容。參數包括：

• filename：設定檔案名稱。以下網址會開啟一個預設檔案名稱為「Default Filename」的編輯器：
  https://pulipulichen.github.io/TinyMCE-Online-Editor/?filename=Default%20Filename
• content：設定檔案內容。以下網址會開啟一個預設檔案內容為「Default Content」的編輯器：
  https://pulipulichen.github.io/TinyMCE-Online-Editor/?content=Default%20Content
• filename跟content兩個參數可以合併一起使用，例如以下網址會開啟預設檔案名稱為「Default Filename」跟預設檔案內容為「Default Content」的編輯器：https://pulipulichen.github.io/TinyMCE-Online-Editor/?filename=Default%20Filename&content=Default%20Content

您可以用以下工具來建立帶有預設檔案名稱或檔案內容的網址：

結語 / In closing

我將TinyMCE做成獨立網頁已經有好一陣子了。一開始是用Dropbox的公開網頁功能來做。不過後來Dropbox關閉了公開網頁功能，於是我就轉移到CodePen上建立TinyMCE網頁。然而CodePen上沒辦法做太複雜的功能，最後我還是回到 GitHub上建立比較複雜的專案，最後就變成這個布丁版TinyMCE編輯器了。

在為原本的TinyMCE加上幾個功能的時候，我深深覺得編輯器這種操作界面實在是很難設計的很好。要如何兼顧美觀跟實用，實在是個兩難。我只是單純考慮到實用而把按鈕擺在哪裡，但實在很難說得上美觀。

不過，使用一段時間之後，就會覺得其實還蠻好用的吧？XD

這個專案會隨著我的需求不斷修改TinyMCE內部的設定。如果未來看到介面跟這篇Blog寫的不太一樣的話，不要覺得奇怪喔。