在全世界使用海豚Dolphin 7.4.2架設的網站系統中,insoler應該是第一個,而且很可能是唯一的一個正式升級到TinyMCE Community 5.0.6的網站!
因為就連目前最新版本的Dolphin 7.4.2系統本身,都還是內建太過老舊的TinyMCE 4.3.3 (2016-01-14)版本!而目前最新的版本是TinyMCE 4.9.4這個版本Version 4.9.4 March 20, 2019,其實是今年最新的版本。而Version 5.0.6 May 22, 2019也只是2天過後就發表的新版本。
雖然TinyMCE Version 4.9.4 March 20, 2019與TinyMCE Version 5.0.6 May 22, 2019都是目前的最新版本,但是你不能從TinyMCE 4.9.4直接升級到TinyMCE 5.0.6!這是因為TinyMCE 5是大幅度翻新JavaScript程式碼,大改版的新系統,與舊的TinyMCE 4系列有很大的不同,所有舊的TinyMCE 4外掛模組都無法用在TinyMCE 5。
雖然Dolphin 7.4.2還在使用相當老舊的TinyMCE 4.3.3,但其實我一直都有關注TinyMCE網站的動向,只要有發佈新的版本我都會盡快更新、升級版本。因此在這之前我使用的已經是目前的TinyMCE 4.9.4最新版本。
TinyMCE是一個類似Microsoft Word的HTML版本的編輯器程式,使用JavaScript語言撰寫。雖然說是「類Word編輯器」但其實HTML編輯器並不需要作出完整的Word功能,相反的簡單好用反而還比較適合更多人使用。Word已經太過龐大、複雜,已經不適合在網頁上執行,雖然微軟有Office 365的網頁版Word。
這是TinyMCE 4.9.4的編輯介面。insoler支援多國語系,當然TinyMCE也支援多國語系。這是在繁體中文看到的樣子。
在「表情」符號這裡,TinyMCE多年以來都是內建非常簡陋的GIF表情圖檔。我不知道他們是找誰取得的表情圖檔的圖形檔案,雖然TinyMCE可以免費使用,但至少應該要提供還不錯的GIF圖檔。但不要說是TinyMCE,就連phpBB等其他PHP網站系統,原廠提供的網站風格、表情圖示都非常的簡陋、難看!只能說是「電腦宅男工程師」會做的事情,毫無審美觀念。
雖然是這樣說,其實我並沒有修改TinyMCE 4.9.4的原始程式碼,我只有更換TinyMCE一直以來、永恆不變,非常簡陋的表情符號的圖形檔案而已。因為TinyMCE 4並不會去搜尋磁碟的資料夾裡面有哪些GIF圖檔,因此我只有更換TinyMCE內建的20個GIF圖檔,並沒有做其他的變更。
其實TinyMCE是在去年發表Version 5.0.0-preview-1 October 1, 2018。我對「預覽版」、「測試版」沒有任何興趣,也不想當TinyMCE免費的白老鼠!事實上我曾經回報過問題,但TinyMCE並不理會我的回報,因此在那之後,我就不再回報任何問題,我決定自己動手修正。由於insoelr網站的會員非常少,因此就算TinyMCE有什麼Bug、問題,也很少人會發現、遇到,因此我只有更換20個原廠提供的醜陋表情符號、修正語系翻譯錯誤、風格的CSS樣式設定,並沒有修改JavaScript程式碼。
由於TinyMCE 5是大改版的全新系統,幾乎沒有一個部分可以向下相容TinyMCE 4!當然也就會導致海豚Dolphin 7.4.2不可能在不修改任何程式碼的情況下,只是下載TinyMCE 5.0.6然後直接取代TinyMCE 4.9.4!事實上,在TinyMCE 5.0.6發表以前,我已經嘗試過好幾次從TinyMCE 4.9升級到TinyMCE 5.0,但每次都升級失敗!因為要修改一些PHP程式碼以外,TinyMCE 5.0把TinyMCE 4.9最重要的「表情」的GIF檔案全部廢除!這會導致整個insoler網站以前使用的GIF表情圖檔都無法顯示!
雖然只要把GIF表情圖檔放回到TinyMCE 4.9.4原本舊有的資料夾位置上,以前發表的文章、討論就可以正常顯示GIF表情圖檔。但是對我來說,這未免太過偷懶!TinyMCE應該也知道這個問題,但卻執意放棄舊的「表情」模組,改用新的Unicode表情文字。
TinyMCE這種「不再向下相容」的做法只能用在全新架設的網站,而無法用在已經架設很久、經營很久的網站。至少應該要提供「表情」的升級版本,讓站長決定要使用舊版?還是停用舊版,只使用新版?
我的決定是讓新舊版本同時使用!因為GIF與Unicode表情文字都各有優缺點。GIF的優點當然是表情比較「生動」缺點是無法隨意放大圖檔。而Unicode的優點則是可以任意放大,而且是文字的一部分,除了節省資料庫空間以外,也容易編輯(複製、貼上等)。缺點是「文字表情」不會「動」有時候會誤解表情代表的意義。
這就是TinyMCE 5.0.6的編輯界面。標準是白色的工具列,我修改成灰色,以便與舊版TinyMCE 4.9.4相同。灰色的工具列也比較容易與文章內容的白底區隔。舊的TinyMCE 4.9.4選單項目是藍色,TinyMCE 5是灰色,我修改成咖啡色。因為電腦介面幾乎都是「藍色」特別是最多人使用的Facebook,看起來好像沒有什麼特色。
TinyMCE 5支援目前最新的Unicdoe的表情字元,因此這些表情都是在你的電腦上都存在的文字。如果你還在使用相當老舊的Windows XP的話,就會因為當年的字型檔案裡面沒有表情字元,就會無法顯示這些特殊的圖形文字!
點選「動物與自然」就可以看到動物、昆蟲、恐龍類的表情文字。例如:🐶🦁🐷🦑🐙🦐🦖⛄
為了可以向下相容舊版TinyMCE 4.9.4的表情,我找到一個叫做tinymce-emoticons-plugins-master的外掛模組,然後自己動手修改JavaScript程式碼,再移植BNW會議室的全部的GIF表情圖示,終於完成了一個可以用在TinyMCE 5的表情符號。因為TinyMCE 4只有內建20個表情圖示,所以利用這次的機會,就把BNW會議室的表情圖示也全部移植過來。
TinyMCE 5內建的表情模組名稱是emoticons,我從做tinymce-emoticons-plugins-master修改而來的新模組叫做Emojis,因此可以同時使用這兩個模組。例如:
在Safari瀏覽器上,看到的Unicode表情文字與GIF表情圖示的樣子大概是這樣:
由於GIF圖檔無法放大(所有的圖檔,包括JPEG都無法任意放大、縮小。這是因為HTML本身並沒有圖形的縮放與編輯功能)所以如果把「字型大小」改成「36pt」的話,就會看到2個很大的Unicode表情文字,與完全無法放大的GIF圖檔。例如:
😁🐶
不過,同樣12pt的表情文字,在Google Chrome瀏覽器上顯得似乎更小一些。
事實上在點選「表情」的時候,所有的表情字元都比Safari還要更小!太小的表情文字,往往很難區別不同表情的細節!我希望這些表情符號可以放大至少2倍,甚至可以放大到3倍!這樣才比較容易區別不同表情符號,找到想要使用的表情文字。但是目前的TinyMCE沒有這種功能!我自己動手修改,雖然可以放大2倍,但也會造成其他不應該放大的工具列圖示也跟著放大2倍!這樣就沒辦法使用,也無法解決表情符號太小的問題!
不要說是前面的「人物」我想你看到「動物與自然」的這些圖示,大概也很難分辨某些圖示到底是什麼符號、什麼動物?
我再比較一次,這是在Safari瀏覽器的表情符號大小。
這是在Google Chrome瀏覽器的表情符號大小。很明顯比Safari還要更小一些。我檢查過CSS,確認2個瀏覽器都是使用14px大小的字型,但Google Chrome就是會比較小!
目前TinyMCE 5.0.6發現的問題有:
雖然升級到TinyMCE 5.0.6遇到不少困難與問題,但我還是決定升級到目前的最新版本。畢竟如果拒絕升級,一直停留在老舊的系統版本,最後導致完全無法升級,終究會被時代自然淘汰。