作者zoko741235 (台北金城武)
看板Web_Design
標題[心得] wysiwyg 文章編輯器分享
時間Mon Oct 12 20:12:55 2015
剛剛找到一款終於成功整合在網站上的來怒發文
wysiwyg = what you see is what you get = 所見即所得
很多文章編輯器以此為名，比如跟 bootstrap3 整合的 bootstrap3-wysiwyg
不過其實有一堆衍生版本，要馬跟bootstrap結合 要馬html5
名字都是幾個字眼重複排列
外觀也是大同小異，雖然原始碼長的都很不一樣
但試了三款都有出不一樣的問題
分別是 bootstrap3-wysiwyg
wysihtml5
bootstrap-wysihtml5
甚至是有附帶一堆很髒的原始碼之類的
底下介紹兩個 命名邏輯跟上面說的那系列不一樣的 wysiwyg 文章編輯器
1. QuillJS
http://quilljs.com/
極漂亮
無 bootstrap-based
官網沒有直接給出 full-editor 的原始碼，要花點時間去弄
我沒有用成功
2. Summernote
http://summernote.org/
蠻好看的
based on jQuery, Bootstrap, font-awesome
只需要寫一個 div，加上官網提供的極少 JS 程式碼就行
使用簡單，產生出的原始碼也很乾淨
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 134.208.45.130
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1444651982.A.033.html
1F：推 imhaha: 二好乾淨，只是功能不多>_< 10/13 11:40
2F：推 qas612820704: 我想請問wysiwyg如果進後台要怎麼避免XSS? 最近正在 10/15 11:47
3F：→ qas612820704: 做相關的東西困擾中 10/15 11:47
4F：→ mmis1000: html sanitizer 搜尋這個，一堆現成的 10/15 13:36
5F：推 qas612820704: 感謝尼 10/15 16:50
6F：→ mmis1000: 對了，這東西一定要在伺服器跑歐，不然就沒意義了 10/15 17:59
7F：推 jacksonxu: 謝謝大大 12/31 17:34