:::

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

image

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

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


布丁版TinyMCE編輯器 / Customized TinyMCE Editor


程式碼 / Code Repository

2017-08-31_133130

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

功能 / Features

2017-08-31_140830

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

開啟檔案 / OPEN

image

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

開新檔案 / NEW

image

可建立空白的新檔案。

預覽網頁 PREVIEW

image

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

anime 2

複製HTML原始碼 / COPY HTML

image

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

儲存檔案 / SAVE

image

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

即時儲存 / Auto-Save

anime3

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

網址載入 / Load Parameters from URL

image

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

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


結語 / In closing

image

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

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

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

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

總共3 則留言, (我要發問)

  1. 修正下列問題:
    - 文件過長時,捲軸超過頁面的問題:現在文件再長也不會讓捲軸超過頁面
    - 水平線hr等標籤消失問題:刪除載入多餘的CSS檔案後解決此問題

    回覆刪除
  2. 非常好用,真心感謝版大!!

    回覆刪除

留言工具: