前面我們搭建的博客使用了 Markdown 來寫文章,假如普通用戶使用的話不懂什么是 Markdown ,加之 Markdown 的表現(xiàn)力還并不是很豐富。這個時候,我們就需要一款強大的編輯器了,我們不妨試試 KindEditor。
KindEditor 是一套開源的在線 HTML 編輯器,主要用于讓用戶在網(wǎng)站上獲得所見即所得編輯效果,開發(fā)人員可以用 KindEditor 把傳統(tǒng)的多行文本輸入框(textarea)替換為可視化的富文本輸入框。KindEditor 使用 JavaScript 編寫,可以無縫地與 Java、.NET、PHP、ASP 等程序集成,比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應用上使用。
快速:體積小,加載速度快 開源:開放源代碼,高水平,高品質(zhì) 底層:內(nèi)置自定義 DOM 類庫,精確操作 DOM 擴展:基于插件的設計,所有功能都是插件,可根據(jù)需求增減功能 風格:修改編輯器風格非常容易,只需修改一個 CSS 文件 兼容:支持大部分主流瀏覽器,比如 IE、Firefox、Safari、Chrome、Opera
到官網(wǎng) http://www.kindsoft.net/ 下載最新的 KindEditor 壓縮包,解壓后將文件夾重命名為 kindEditor 并放到 public 文件夾下。
注意:可以根據(jù)自己需求刪除文件夾或文件,我們刪除以下文件夾:
首先,我們來將多行文本輸入框(textarea)替換為 kindEditor 編輯器。打開 header.ejs ,在:
<link rel="stylesheet" href="/stylesheets/style.css">
下一行添加如下代碼:
<script charset="utf-8" src="/KindEditor/kindeditor-min.js"></script>
<script charset="utf-8" src="/KindEditor/lang/zh_CN.js"></script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea', {
allowImageUpload : false,
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic',
'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright',
'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
});
</script>
注意:這里我們通過 create 創(chuàng)建了一個編輯器,第一個參數(shù)為 CSS 選擇器,設置為 textarea ,則發(fā)表、編輯及留言的 textarea 都會變?yōu)榫庉嬈鳌<偃缥覀冎幌胱尠l(fā)表和編輯時使用編輯器,留言時不使用編輯器,則只需將 textarea 修改為 textarea[name="post"] 即可。第二個參數(shù)可以設置編輯器的編輯選項,這里我們通過自定義 items 配置編輯器的工具欄,其中可用 "/" 表示換行,"|" 表示分隔符。,并設置 allowImageUpload : false 取消編輯器的圖片上傳按鈕。詳細的編輯器配置請查閱 http://www.kindsoft.net/docs/option.html。
以上是簡單的(simple)編輯器樣式,我們也可以使用 KindEditor 默認的(default)編輯器樣式,將以上 KindEditor.ready 替換為以下代碼即可(這里我們不做修改):
var editor;
KindEditor.ready(function(K) {
editor = K.create('#kindeditor');
});
最后,刪除有關轉(zhuǎn)換 Markdown 的代碼。打開 post.js ,刪除:
markdown = require('markdown').maparkdown
刪除 Post.getTen 內(nèi)的:
docs.forEach(function (doc) {
doc.post = markdown.toHTML(doc.post);
});
刪除 Post.getOne 內(nèi)的:
doc.post = markdown.toHTML(doc.post);
doc.comments.forEach(function (comment) {
comment.content = markdown.toHTML(comment.content);
});
現(xiàn)在,運行你的博客試試吧。
發(fā)表前
http://wiki.jikexueyuan.com/project/express-mongodb-setup-blog/images/6.1.jpg" alt="" />
發(fā)表后
http://wiki.jikexueyuan.com/project/express-mongodb-setup-blog/images/6.2.jpg" alt="" />
注意:添加圖片地址時,引用站外的圖片要用絕對地址,引用站內(nèi)的圖片則用相對地址,如:/images/lufei.jpg 。
更多關于 KindEditor 的使用詳見官方文檔。
參考文獻