:::

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寫的不太一樣的話,不要覺得奇怪喔。

總共24 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

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

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

    回覆刪除
  3. 好猛喔= ="
    我做個div contenteditable的版本就做到快死了QQ

    回覆刪除
    回覆
    1. To 林信嘉,

      div contenteditable要達到的目標不太一樣
      加油

      刪除
  4. 您好,打擾了,請問原本TinyMCE langs/ 資料夾下面可以加入語系翻譯,這個版本還支援此功能嗎?

    回覆刪除
    回覆
    1. To Soomean:

      我也不確定,但我試了一下沒反應

      你可以自行下載或fork程式碼來修改:
      https://github.com/pulipulichen/TinyMCE-Online-Editor

      如果不會下載GitHub,請看「如何從GitHub下載檔案?」這篇:
      http://blog.pulipuli.info/2016/05/github-how-to-download-files-in-github.html

      TinyMCE的語言檔案下載位置
      https://www.tinymce.com/download/language-packages/

      刪除
    2. XDD 感謝嘗試,我剛剛也試了好一陣子,看了一下你的修改紀錄幾乎是一樣的方法
      最後我將 jquery.tinymce.min.js 也加進去就能正常翻譯了

      刪除
    3. 不...她失效了,我再研究研究看看

      刪除
    4. 搞定了,首先暫存的問題要先排除,再來是目前版本是編輯器本身直接去遠端抓取,遠端langs沒有對應的字形檔,需要先修改成讀取本地,再把tinymce.min.js以外的檔案補齊

      刪除
    5. OAO
      好像挺複雜的,請加油吧!

      刪除
    6. 感謝啟發
      原來我是用遠端的TinyMCE啊orz 真是不好意思,給人家添麻煩了
      更新後預設使用正體中文版本囉

      刪除
  5. https://simplemde.com/
    最近覺得Markdown也挺不錯的,之後也可以來個Markdown編輯器自己做!

    回覆刪除
  6. 想問一下大大 我想把這編輯器放在自製的論壇上 請問需要加上大大的名字嗎?

    回覆刪除
  7. 請問布丁大大,您這個TinyMCE的版本可以變更直書/橫書嗎?
    小弟有用了原廠的TinyMCE,但是找不到直書/橫書的轉換

    回覆刪除
    回覆
    1. To Peterrabbit,

      大部分網頁編輯器都不具備垂直文字編輯的功能。

      如果你只是想要顯示時切換,應使用CSS。
      https://ithelp.ithome.com.tw/articles/10139081

      刪除
    2. 謝謝布丁,小弟再試看看

      刪除
  8. 你好,我想請教,要做出跟你類似的編輯中文面板和存檔功能,是要引用哪些元件? 還是存檔功能是另外寫JS呢? 謝謝你

    回覆刪除
    回覆
    1. 可以圈個範圍,讓我知道你指的是哪個部分嗎?
      大部分應該都是我另外寫的,我應該是用jQuery寫的吧

      刪除
    2. 我有截圖片寄送到你的信箱跟你請教詢問了,謝謝布丁

      刪除
    3. 原始碼都在這裡。要注意的是,我的TinyMCE版本非常舊,跟現在你用的版本可能已經差了十萬八千里。請斟酌參考。
      https://github.com/pulipulichen/TinyMCE-Online-Editor

      上面的紅框是TinyMCE的Toolbar功能,設定在這裡:
      https://github.com/pulipulichen/TinyMCE-Online-Editor/blob/master/script.js

      下面是jQuery去操作TinyMCE的功能,從這行開始看:
      https://github.com/pulipulichen/TinyMCE-Online-Editor/blob/master/script.js#L85

      必須要注意的是,TinyMCE現在的版本可能已經是不同的操作邏輯了。
      請自行注意這之間的差別。

      ----

      補充一下

      https://blogger.googleusercontent.com/img/a/AVvXsEjkxHgqgKgWkUiBRx5x4zuOdD9fpXdo7r0G0YjQgUn8_PONmS9p4u8zkW-wsE2_RDPVqvCSBRFM7w2OMlA2LopKxc9OO8cNPD6p7AudSmMUufjFLi73BP_9g-TXK3Nmgnpf1EfNzdLhAu6QoijlCF-hnshHUyG_4TGsLdj_LFYqcStXsuD2mfssbA
      上傳圖片的工具藏在這裡...算了,我改一下按鈕位置好了。

      刪除
  9. https://imgur.com/a/RRpWPG1
    發文要留圖

    回覆刪除