[心得] wysiwyg 文章編輯器分享

[zoko741235 (台北金城武)]

剛剛找到一款終於成功整合在網站上的來怒發文



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://www.ptt.cc/bbs/Web_Design/M.1444651982.A.033.html
推 imhaha: 二好乾淨，只是功能不多>_<
推 qas612820704: 我想請問wysiwyg如果進後台要怎麼避免XSS? 最近正在
→ qas612820704: 做相關的東西困擾中
→ mmis1000: html sanitizer 搜尋這個，一堆現成的
推 qas612820704: 感謝尼
→ mmis1000: 對了，這東西一定要在伺服器跑歐，不然就沒意義了
推 jacksonxu: 謝謝大大