Node.JS學習筆記(七)_後台編輯內文_WYSIWYG富文本編輯器ckeditor4套用_EJS綁定html的方式
近期在進行活動官網後台部落格系統設計時
遇到的問題
由於內文直接輸入的文字段落到了網頁後不會認識換行跟一些列表(1、2、...)、粗體、空格等等
樣式根本沒辦法自由設定
因此這裡找到了一款還滿老牌有名氣的ckeditor第三方套件來幫助我們達成
富文本編輯器的效果
(有點類似Blogger有很多基本樣式設定預設可以自行幫你添加一些html跟css樣式，不用要用戶自己還要去寫html tag之類的)
其為open source
授權採用GNU GPL v2 之後
到官方網站這裡我們挑選ckeditor4
(雖然最新有出到5不過據說功能不完全跟而且是類似完全翻新寫的沒有向下相容)
首先將解壓好的ckeditor folder
整包放到專案目錄中js讀取的專屬目錄
在html一開始引入
js部分
是要把原本textarea的部分改成CKEditor的編輯器，
因此()裡面的內容一定要和textarea中id或者name屬性的內容一樣才行(這裡用content)。
效果
接著要來測試post到後端時能否抓地到CKEditor裡面的編輯內容
這裡輸入一段文字
在從資料庫儲存讀值並render到html後效果看起來沒有正確變成該有的格式....
好像多出了雙引號
這裡經過修正
將EJS的綁定從 <%=.....%> 改為 <%- .....%>即可
在一般透過 ejs render到頁面中的若是純文字字串可以用<%=...%>
但若是要呈現出html效果就要用<%-....%>了
其餘的EJS綁定語法
- <% 'Scriptlet' tag, for control-flow, no output
- <%_ ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it
- <%= Outputs the value into the template (HTML escaped)
- <%- Outputs the unescaped value into the template
- <%# Comment tag, no execution, no output
- <%% Outputs a literal '<%'
- %> Plain ending tag
- -%> Trim-mode ('newline slurp') tag, trims following newline
- _%> ‘Whitespace Slurping’ ending tag, removes all whitespace after it
Ref:
[筆記] CKEditor內容編輯器安裝說明
How to render the html stored in the database to an ejs page
[前端軍火庫]CKEditor - 最好用的Web版文字編輯器
還有另一個其插件(這裡就暫時先不介紹了~後續有空在說吧)
用於圖片預覽相應效果
https://ckeditor.com/cke4/addon/imagebrowser
留言
張貼留言