iT邦幫忙

0

如何選擇Javascript based 所見即所得編輯器(rich editor)?

toykid 2012-05-24 10:44:4218589 瀏覽

最近有一個專案需要用到所見即所得的編輯器,有上網去稍微看了一下,可以選的還蠻多的,不過不知道怎麼選起。

目前有看了幾個好像還不錯的:

1.CKEditor :牌子老,可靠度應該不錯,不過我們的情況應該需要付授權費(http://ckeditor.com/)

  1. TinyMCE:名稱和CKEditor差不多,功能也是包山包海(http://www.tinymce.com/)

3.Closure Library Editor:Google出的,有巨人在背後撐腰好像不錯,不過用的人應該偏少(http://closuretools.blogspot.com/2010/07/introducing-closure-library-editor.html)

4.YUI Rich Text Editor:YUI的可靠度說不定還比Google Editor來得高,不過這一版沒有提供UI Orz...(http://yuilibrary.com/yui/docs/editor/)

以上是初步看到的幾個,目前也還在找其他的。另外最近很流行markdown,所以也去看了一款stackoverflow使用的wmd(http://code.google.com/p/wmd/) 不過看起來維護的情形好像沒有很好。

1.想請教大家的經驗,用過或評估過上面這些編輯器嗎?有沒有推薦的,或是你有覺得更好用的?

2.markdown的概念的編輯器跟一般所見即使得的編輯器比起來有什麼好處?畢竟一般的編輯器對使用者來說比較友善,但是markdown最近的興起,又讓我覺得說不定有什麼好處我沒看到。

3.我們最大的考量應該是編輯器維護性,例如新的瀏覽器出來時,如果有bug,官方可以快速解決。然後要調整介面的UI不會太難。如果可以免費的最好,但是如果要付錢才能獲得理想解決方案,也是可接受的選項。

4.除了上面幾個我們的考量點之外,還有沒有什麼需要注意的。

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
16
tony1223
iT邦新手 2 級 ‧ 2012-05-24 11:49:30
最佳解答

簡要回答:

要考慮的點如下:
1.server side 的容易安裝程度 (通常是用在檔案上傳)
2.套件客製化容易程度跟模組(重點在提供給你的 API 跟事件夠不夠)
3.使用者操作介面的直覺程度
4.Script loading 的速度

基本上我覺得
1.兩邊都很難搞
2.TinyMCE 的 API 簡潔而明確,CKEditor 太多陳年包袱跟厚重
3.CK Editor 我覺得比 TinyMCE 來得直覺跟漂亮(個人意見)
4.檔案數跟架構上,我覺得TinyMCE 來得好。

要我選兩個其中之一的話,我會選 TinyMCE 。

文本編輯(html)的話我建議是這兩個比較龍頭,
其他的部份基本上就要看你的需求用了,像是 codemirrow 很適合用來打程式碼之類的。

markdown 的優點在於把文本跟呈現抽象化,但要求使用者有一定程度組織文件的能力,
簡而言之,markdown 是給寫手用的,而不是給一般人用的。

如果有可能完全不懂 html /web / 網路撰文的人,還是提供 WYSIWYG 比較好。

舉個例子,如果要你用 wiki format 打 blog ,可能你可以接受,但是很多使用者可能不能接受這樣。使用族群是不一樣的,寫作網站朝著使用族群去發想的話,可以省下很多冤枉路。

toykid iT邦新手 5 級 ‧ 2012-05-25 14:34:35 檢舉

以我們的目標用戶來說,這樣應該是不用考慮markdown的編輯器了。

server side 的容易安裝程度這點倒是之前都沒考慮進去,來試試看。

6
wordsmith
iT邦高手 1 級 ‧ 2012-05-25 10:58:26

在Facebook的JavaScript.tw粉絲團裡,有位Vexed大大提供了關於TinyMCE的經驗,徵得他本人同意後,我把他的意見整理過來。

在他的部落格裡,發表過TinyMCE 感,文章裡面有他跟TinyMCE博鬥的感想:

今年的加班差不多都是因為 TinyMCE ,加班事由寫到爛了,怎麼寫都是「Blog 客訴」、「TinyMCE」,我都在想哪天長官要來約談我,怎麼加班事由都一樣

想想 TinyMCE 對我影響也滿大的,我的資料夾命名、變數命名、程式架構應該都有 TinyMCE 的影子。這幾年也從這學了不少 DOM 和 JavaScript 。像是瀏覽器和 TinyMCE 的分界、比 event 還恐怖的跨瀏覽器地獄 TextRange 。不諱言, TinyMCE 3.X API 真的設計的不錯,不然很多程式碼我可能連要從哪裡找都不知道。

但也感覺 TinyMCE 正在由盛轉衰, Who is using TinyMCE? 中很多公司已經慢慢開始自己開發 WYSIWYG 編輯器。我也慢慢快被搞到要丟掉我也沒關係了。

看他們的程式碼真的感受到瀏覽器的 Robust , JavaScript 寫成這樣還不是跑得好好的。而且現在這種補丁式的修改法恐怕會越修越肥。回報的 bug 簡單的瞬殺,難的就往後丟。

另外Vexed大大今天又跳出來說又被TinyMCE婊到

TinyMCE 的工程師直接在註解寫「Found WebKit weirdness so force the content into plain text mode」然後造成另一個 bug 給大家參考囉

以上就提供給toykid參考。

tony1223 iT邦新手 2 級 ‧ 2012-05-25 14:23:56 檢舉

與其說這是被 tinyMCE 婊到,倒不如說是被 WYSIWYG 婊到,
這種編輯器本來就有一定程度的不穩定性,換作是用 CKEditor 不見得就會比較好....

toykid iT邦新手 5 級 ‧ 2012-05-25 14:31:50 檢舉

WYSIWYG 的不穩定性是因為什麼原因?

tony1223 iT邦新手 2 級 ‧ 2012-05-27 19:51:48 檢舉

@toykid 因為瀏覽器 textarea 的操作,這件事情有很多限制。
另一方面 WYSIWYG 要同時處理把使用者輸入的東西轉換成畫面這件事,
中間本來就會有很多不穩定的要素存在。

像是舉例,
"12[345]6"
你今天按了 B ,他應該要弄成 html 像這樣 12<b>345</b>6 ,
然後你又選了 23 按 B,這時候他應該要是 1<b>2<b>3</b>456 嗎?

顯然不是,WYSIWYG 有很多這種算是狀態加成的問題需要考慮,
有複雜狀態的東西,多少就會有不穩定性。

如果你有作過IDE這類文本分析的話,你會知道他們有很多策略來搞定這些事情,
原生應用程式都不見得能做好的東西,要透過效能相對低落的 JS 來作就更困難了。

2
yogo
iT邦新手 3 級 ‧ 2012-05-26 15:24:55

1.CKEditor :牌子老,可靠度應該不錯,不過我們的情況應該需要付授權費(http://ckeditor.com/)

所以> 2. TinyMCE:名稱和CKEditor差不多,功能也是包山包海(http://www.tinymce.com/)

在不管任何情況下,包含商業行為下都可以免費使用嗎?

我要發表回答

立即登入回答