KindEditor 是一套開源的在線 HTML 編輯器，主要用于讓用戶在網(wǎng)站上獲得所見即所得編輯效果，開發(fā)人員可以用 KindEditor 把傳統(tǒng)的多行文本輸入框（textarea）替換為可視化的富文本輸入框。KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。

主要特點(diǎn)

快速：體積小，加載速度快開源：開放源代碼，高水平，高品質(zhì) 底層：內(nèi)置自定義 DOM 類庫，精確操作 DOM 擴(kuò)展：基于插件的設(shè)計(jì)，所有功能都是插件，可根據(jù)需求增減功能風(fēng)格：修改編輯器風(fēng)格非常容易，只需修改一個(gè) CSS 文件兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera

使用 KindEditor

到官網(wǎng) http://www.kindsoft.net/ 下載最新的 KindEditor 壓縮包，解壓后將文件夾重命名為 kindEditor 并放到 public 文件夾下。

注意：可以根據(jù)自己需求刪除文件夾或文件，我們刪除以下文件夾：

asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件

首先，我們來將多行文本輸入框（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)建了一個(gè)編輯器，第一個(gè)參數(shù)為 CSS 選擇器，設(shè)置為 textarea ，則發(fā)表、編輯及留言的 textarea 都會(huì)變?yōu)榫庉嬈?。假如我們只想讓發(fā)表和編輯時(shí)使用編輯器，留言時(shí)不使用編輯器，則只需將 textarea 修改為 textarea[name="post"] 即可。第二個(gè)參數(shù)可以設(shè)置編輯器的編輯選項(xiàng)，這里我們通過自定義 items 配置編輯器的工具欄，其中可用 "/" 表示換行，"|" 表示分隔符。，并設(shè)置 allowImageUpload : false 取消編輯器的圖片上傳按鈕。詳細(xì)的編輯器配置請查閱 http://www.kindsoft.net/docs/option.html。

以上是簡單的（simple）編輯器樣式，我們也可以使用 KindEditor 默認(rèn)的（default）編輯器樣式，將以上 KindEditor.ready 替換為以下代碼即可(這里我們不做修改)：

var editor;
KindEditor.ready(function(K) {
  editor = K.create('#kindeditor');
});

最后，刪除有關(guān)轉(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)在，運(yù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="" />

注意：添加圖片地址時(shí)，引用站外的圖片要用絕對地址，引用站內(nèi)的圖片則用相對地址，如：/images/lufei.jpg 。

更多關(guān)于 KindEditor 的使用詳見官方文檔。

參考文獻(xiàn)

KindEditor ： http://www.kindsoft.net/
可視化HTML編輯器 KindEditor ： http://www.oschina.net/p/kindeditor/

上一篇：第1章一個(gè)簡單的博客下一篇：番外篇之——使用 _id 查詢

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

番外篇之——使用 KindEditor

什么是 KindEditor

主要特點(diǎn)

使用 KindEditor