Post view

insoler社群網站升級到TinyMCE Community 5.0.6。全球的海豚系統中,第一個升級到5.0的網站!

在全世界使用海豚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。

TinyMCE Version 4.9.4

雖然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.6

其實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,因此可以同時使用這兩個模組。例如:smiling face with sunglassesloudly crying faceflushed faceface with hand over mouthpleading faceclapping handsgrinning face with smiling eyes

在Safari瀏覽器上,看到的Unicode表情文字與GIF表情圖示的樣子大概是這樣:

由於GIF圖檔無法放大(所有的圖檔,包括JPEG都無法任意放大、縮小。這是因為HTML本身並沒有圖形的縮放與編輯功能)所以如果把「字型大小」改成「36pt」的話,就會看到2個很大的Unicode表情文字,與完全無法放大的GIF圖檔。例如:

😁🐶grinning face with smiling eyes

不過,同樣12pt的表情文字,在Google Chrome瀏覽器上顯得似乎更小一些。

事實上在點選「表情」的時候,所有的表情字元都比Safari還要更小!太小的表情文字,往往很難區別不同表情的細節!我希望這些表情符號可以放大至少2倍,甚至可以放大到3倍!這樣才比較容易區別不同表情符號,找到想要使用的表情文字。但是目前的TinyMCE沒有這種功能!我自己動手修改,雖然可以放大2倍,但也會造成其他不應該放大的工具列圖示也跟著放大2倍!這樣就沒辦法使用,也無法解決表情符號太小的問題!

不要說是前面的「人物」我想你看到「動物與自然」的這些圖示,大概也很難分辨某些圖示到底是什麼符號、什麼動物?

我再比較一次,這是在Safari瀏覽器的表情符號大小。

這是在Google Chrome瀏覽器的表情符號大小。很明顯比Safari還要更小一些。我檢查過CSS,確認2個瀏覽器都是使用14px大小的字型,但Google Chrome就是會比較小!

目前TinyMCE 5.0.6發現的問題有:

  • 語系翻譯錯誤。例如表情符號上面的「搜索」。我猜想這個用詞大概是從簡體字直接換成繁體字。我已經手動修改成「尋找」。「尋找」或是「搜尋」才是比較好的翻譯。另外還有好幾個錯誤翻譯,都已經修正好。
  • 表情符號的字元太小。甚至Google Chrome瀏覽器比Safari瀏覽器看到的圖示還要更小!Firefox瀏覽器則是與Google Chrome相同大小。
  • 表情符號的emoticons外掛模組不相容TinyMCE 4.9.4舊版。為了避免以前在文章、討論裡面使用的GIF表情圖示完全無法顯示,必須把舊的GIF圖檔放回到原本的emoticons路徑,或是自己安裝、修改一個向下相容GIF表情圖示的emoji外掛模組。
  • 在TinyMCE網站上只有Skin Creator for TinyMCE 4,沒有專為TinyMCE 5設計的Skin Creator for TinyMCE 5,導致要設計不一樣的風格會有點困難。

雖然升級到TinyMCE 5.0.6遇到不少困難與問題,但我還是決定升級到目前的最新版本。畢竟如果拒絕升級,一直停留在老舊的系統版本,最後導致完全無法升級,終究會被時代自然淘汰。

蘇言霖 2019/05/31 0 947
Comments
Order by: 
Per page:
 
  • There are no comments yet
Rate
0 votes
Post info
蘇言霖
「超級懶貓級」社群網站站長
2019/05/31 (1786 days ago)
Actions