一、簡介
書客編輯器是一款基於Makedown標記語言的富文本編輯器，簡易界面設置，強大的操作功能，適用於幾乎所有寫作平臺。
二、安裝使用
書客編輯器安裝和使用過程相當簡潔，只需要簡單的四步就可以完成。
1、導入文件
首先要下載相應的文件。
下載書客編輯器Web版文件，找到文件夾中ibookereditor文件，將其導入到你項目的根目錄。
下載地址：
書客編輯器官網：http://editor.ibooker.cc/editor/download
Github地址：https://github.com/zrunker/ibookerEditorWeb
2、添加布局
<div id="ibooker_editor"></div>
需要在body體內添加以上代碼。
3、引入CSS樣式
<link rel="stylesheet" rev="stylesheet" href="ibookereditor/css/ibooker_editor_min.css" type="text/css" />
<link rel="stylesheet" rev="stylesheet" href="ibookereditor/css/ibooker_editor_md_min.css" type="text/css"/>
在head體引入以上CSS樣式。
4、引入JS文件
<script type="text/javascript" src="ibookereditor/ibooker-editor-min-1.0.js"></script>
最後引入以上JS文件，這樣書客編輯器就引入到你的項目當中了。
運行結果樣式如下：
三、常用屬性設置
以下是對常用的一些屬性進行初始化：通過JS動態操作。
<script type="text/javascript">
window.onload = function() {
// 初始化書客編輯器
ibookerEditor.setIbookerEditorOptions({
isOpenPreview : true, // 否開啟預覽 true/false
isHeightFullClient : true, // 編輯器高度是否充滿瀏覽器 true/false
compileBack : function() { // 預覽回調方法 function
// 獲取輸入值轉義後的Html
var htmlValue = ibookerEditor.sdConverter.getHtml();
},
editorWidth : "100%", // 編輯器的寬度 - 可以設置數字或者百分百
editorHeight : "100%", // 編輯器的高度 - 可以設置數字或者百分百
bindTextAreaId : "editor_content", // 綁定輸入框ID，默認editor_content
bindPreviewId : "editor_preview", // 綁定預覽框ID，默認editor_preview
isOpenBoldEvent : true, // 是否開啟粗體事件true/false，默認true
isOpenItalicEvent : true, // 是否開啟斜體事件true/false，默認true
isOpenUnderlineEvent : true, // 是否開啟下劃線事件true/false，默認true
isOpenCapitalsEvent : true, // 是否開啟單詞首字母大寫事件true/flase，默認true
isOpenUppercaseEvent : true, // 是否開啟單詞轉大寫事件true/false，默認true
isOpenLowercaseEvent : true, // 是否開啟單詞轉小寫事件true/false，默認true
isOpenH1Event : true, // 是否開啟一級標題事件true/false，默認true
isOpenH2Event : true, // 是否開啟二級標題事件true/false，默認true
isOpenH3Event : true, // 是否開啟三級標題事件true/false，默認true
isOpenH4Event : true, // 是否開啟四級標題事件true/false，默認true
isOpenH5Event : true, // 是否開啟五級標題事件true/false，默認true
isOpenH6Event : true, // 是否開啟六級標題事件true/false，默認true
isOpenLinkEvent : true, // 是否開啟連結事件true/false，默認true
isOpenQuoteEvent : true, // 是否開啟引用事件true/false，默認true
isOpenCodeEvent : true, // 是否開啟代碼事件true/false，默認true
isOpenImgEvent : true, // 是否開啟圖片事件true/false，默認true
isOpenOlEvent : true, // 是否開啟數字列表事件true/false，默認true
isOpenUlEvent : true, // 是否開啟普通列表事件true/false，默認true
isOpenUnselectedEvent : true, // 是否開啟列表未選中事件true/false，默認true
isOpenSelectedEvent : true, // 是否開啟列表選中事件true/false，默認true
isOpenTableEvent : true, // 是否開啟表格事件true/false，默認true
isOpenHtmlEvent : true, // 是否開啟Html事件true/false，默認true
isOpenHrEvent : true, // 是否開啟分割線事件true/false，默認true
isOpenUndoEvent : true, // 是否開啟撤銷事件true/false，默認true
isOpenRedoEvent : true, // 是否開啟重做事件true/false，默認true
isOpenHelpEvent : true, // 是否開啟幫助事件true/false，默認true
isOpenPreviewEvent : true, // 是否開啟預覽模式事件true/false，默認true
isOpenLiveEvent : true, // 是否開啟實況模式事件true/false，默認true
isOpenEditEvent : true, // 是否開啟編輯模式事件true/false，默認true
isOpenZenEvent : true // 是否開啟全屏事件true/false，默認true
});
};
</script>
四、其他屬性設置
其他屬性主要是針對於，書客編輯器頂部工具欄而設置的。
1、預覽相關事件
手動預覽
var textArea = document.getElementById("editor_content");
var html = ibookerEditor.sdConverter.converToHtml(textArea.value);
document.getElementById("editor_preview").innerHTML = html;
獲取Html
var html = ibookerEditor.sdConverter.getHtml();
2、粗體事件
<script type="text/javascript">
// 設置粗體事件屬性
ibookerEditor.setBoldOptions({
boldEvent : function () {
alert("自定義粗體事件處理方法");
},
addEventBefore : function () {
alert("粗體事件之前執行方法");
},
addEventAfter : function () {
alert("粗體事件之後執行方法");
}
});
</script>
3、斜體事件
<script type="text/javascript">
// 設置斜體事件屬性
ibookerEditor.setItalicOptions({
italicEvent : function () {
alert("定義斜體事件處理方法");
},
addEventBefore : function () {
alert("斜體事件之前執行方法");
},
addEventAfter : function () {
alert("斜體事件之後執行方法");
}
});
</script>
4、刪除線事件
<script type="text/javascript">
// 設置刪除線事件屬性
ibookerEditor.setStrikeoutOptions({
strikeoutEvent : function () {
alert("定義刪除線事件處理方法");
},
addEventBefore : function () {
alert("刪除線事件之前執行方法");
},
addEventAfter : function () {
alert("刪除線事件之後執行方法");
}
});
</script>
5、下劃線事件
<script type="text/javascript">
// 設置下劃線事件屬性
ibookerEditor.setUnderlineOptions({
underlineEvent : function () {
alert("定義下劃線事件處理方法");
},
addEventBefore : function () {
alert("下劃線事件之前執行方法");
},
addEventAfter : function () {
alert("下劃線事件之後執行方法");
}
});
</script>
6、單詞首字母大寫事件
<script type="text/javascript">
// 設置單詞首字母大寫事件屬性
ibookerEditor.setCapitalsOptions({
capitalsEvent : function () {
alert("定義單詞首字母大寫事件處理方法");
},
addEventBefore : function () {
alert("單詞首字母大寫事件之前執行方法");
},
addEventAfter : function () {
alert("單詞首字母大寫事件之後執行方法");
}
});
</script>
7、單詞轉大寫事件
<script type="text/javascript">
// 設置單詞轉大寫事件屬性
ibookerEditor.setUppercaseOptions({
uppercaseEvent : function () {
alert("定義單詞轉大寫事件處理方法");
},
addEventBefore : function () {
alert("單詞轉大寫事件之前執行方法");
},
addEventAfter : function () {
alert("單詞轉大寫事件之後執行方法");
}
});
</script>
8、單詞轉小寫事件
<script type="text/javascript">
// 設置單詞轉小寫事件屬性
ibookerEditor.setLowercaseOptions({
lowercaseEvent : function () {
alert("定義單詞轉小寫事件處理方法");
},
addEventBefore : function () {
alert("單詞轉小寫事件之前執行方法");
},
addEventAfter : function () {
alert("單詞轉小寫事件之後執行方法");
}
});
</script>
9、一級標題事件
<script type="text/javascript">
// 設置一級標題事件屬性
ibookerEditor.setH1Options({
h1Event : function () {
alert("定義一級標題事件處理方法");
},
addEventBefore : function () {
alert("一級標題事件之前執行方法");
},
addEventAfter : function () {
alert("一級標題事件之後執行方法");
}
});
</script>
10、二級標題事件
<script type="text/javascript">
// 設置二級標題事件屬性
ibookerEditor.setH2Options({
h2Event : function () {
alert("定義二級標題事件處理方法");
},
addEventBefore : function () {
alert("二級標題事件之前執行方法");
},
addEventAfter : function () {
alert("二級標題事件之後執行方法");
}
});
</script>
11、三級標題事件
<script type="text/javascript">
// 設置三級標題事件屬性
ibookerEditor.setH3Options({
h3Event : function () {
alert("定義三級標題事件處理方法");
},
addEventBefore : function () {
alert("三級標題事件之前執行方法");
},
addEventAfter : function () {
alert("三級標題事件之後執行方法");
}
});
</script>
12、四級標題事件
<script type="text/javascript">
// 設置四級標題事件屬性
ibookerEditor.setH4Options({
h4Event : function () {
alert("定義四級標題事件處理方法");
},
addEventBefore : function () {
alert("四級標題事件之前執行方法");
},
addEventAfter : function () {
alert("四級標題事件之後執行方法");
}
});
</script>
13、五級標題事件
<script type="text/javascript">
// 設置五級標題事件屬性
ibookerEditor.setH5Options({
h5Event : function () {
alert("定義五級標題事件處理方法");
},
addEventBefore : function () {
alert("五級標題事件之前執行方法");
},
addEventAfter : function () {
alert("五級標題事件之後執行方法");
}
});
</script>
14、六級標題事件
<script type="text/javascript">
// 設置六級標題事件屬性
ibookerEditor.setH6Options({
h6Event : function () {
alert("定義六級標題事件處理方法");
},
addEventBefore : function () {
alert("六級標題事件之前執行方法");
},
addEventAfter : function () {
alert("六級標題事件之後執行方法");
}
});
</script>
15、連結事件
<script type="text/javascript">
// 設置連結事件屬性
ibookerEditor.setLinkOptions({
linkEvent : function () {
alert("定義連結事件處理方法");
},
addEventBefore : function () {
alert("連結事件之前執行方法");
},
addEventAfter : function () {
alert("連結事件之後執行方法");
}
});
</script>
16、引用事件
<script type="text/javascript">
// 設置引用事件屬性
ibookerEditor.setQuoteOptions({
quoteEvent : function () {
alert("定義引用事件處理方法");
},
addEventBefore : function () {
alert("引用事件之前執行方法");
},
addEventAfter : function () {
alert("引用事件之後執行方法");
}
});
</script>
17、代碼事件
<script type="text/javascript">
// 設置代碼事件屬性
ibookerEditor.setCodeOptions({
codeEvent : function () {
alert("定義代碼事件處理方法");
},
addEventBefore : function () {
alert("代碼事件之前執行方法");
},
addEventAfter : function () {
alert("代碼事件之後執行方法");
}
});
</script>
18、圖片事件
<script type="text/javascript">
// 設置圖片事件屬性
ibookerEditor.setImgOptions({
imgEvent : function () {
alert("定義圖片事件處理方法");
},
addEventBefore : function () {
alert("圖片事件之前執行方法");
},
addEventAfter : function () {
alert("圖片事件之後執行方法");
}
});
</script>
19、數字列表
<script type="text/javascript">
// 設置數字列表事件屬性
ibookerEditor.setOlOptions({
olEvent : function () {
alert("定義數字列表事件處理方法");
},
addEventBefore : function () {
alert("數字列表事件之前執行方法");
},
addEventAfter : function () {
alert("數字列表事件之後執行方法");
}
});
</script>
20、普通列表
<script type="text/javascript">
// 設置普通列表事件屬性
ibookerEditor.setUlOptions({
ulEvent : function () {
alert("定義普通列表事件處理方法");
},
addEventBefore : function () {
alert("普通列表事件之前執行方法");
},
addEventAfter : function () {
alert("普通列表事件之後執行方法");
}
});
</script>
21、列表未選中事件
<script type="text/javascript">
// 設置列表未選中事件屬性
ibookerEditor.setUnselectedOptions({
unselectedEvent : function () {
alert("定義列表未選中事件處理方法");
},
addEventBefore : function () {
alert("列表未選中事件之前執行方法");
},
addEventAfter : function () {
alert("列表未選中事件之後執行方法");
}
});
</script>
22、列表選中事件
<script type="text/javascript">
// 設置列表選中事件屬性
ibookerEditor.setSelectedOptions({
selectedEvent : function () {
alert("定義列表選中事件處理方法");
},
addEventBefore : function () {
alert("列表選中事件之前執行方法");
},
addEventAfter : function () {
alert("列表選中事件之後執行方法");
}
});
</script>
23、表格事件
<script type="text/javascript">
// 設置表格事件屬性
ibookerEditor.setTableOptions({
tableEvent : function () {
alert("定義表格事件處理方法");
},
addEventBefore : function () {
alert("表格事件之前執行方法");
},
addEventAfter : function () {
alert("表格事件之後執行方法");
}
});
</script>
24、HTML事件
<script type="text/javascript">
// 設置Html事件屬性
ibookerEditor.setHtmlOptions({
htmlEvent : function () {
alert("定義Html事件處理方法");
},
addEventBefore : function () {
alert("Html事件之前執行方法");
},
addEventAfter : function () {
alert("Html事件之後執行方法");
}
});
</script>
25、分割線事件
<script type="text/javascript">
// 設置分割線事件屬性
ibookerEditor.setHrOptions({
hrEvent : function () {
alert("定義分割線事件處理方法");
},
addEventBefore : function () {
alert("分割線事件之前執行方法");
},
addEventAfter : function () {
alert("分割線事件之後執行方法");
}
});
</script>
26、撤銷事件
<script type="text/javascript">
// 設置撤銷事件屬性
ibookerEditor.setUndoOptions({
undoEvent : function () {
alert("定義撤銷事件處理方法");
},
addEventBefore : function () {
alert("撤銷事件之前執行方法");
},
addEventAfter : function () {
alert("撤銷事件之後執行方法");
}
});
</script>
27、重做事件
<script type="text/javascript">
// 設置重做事件屬性
ibookerEditor.setRedoOptions({
redoEvent : function () {
alert("定義重做事件處理方法");
},
addEventBefore : function () {
alert("重做事件之前執行方法");
},
addEventAfter : function () {
alert("重做事件之後執行方法");
}
});
</script>
28、預覽模式事件
<script type="text/javascript">
// 設置預覽事件屬性
ibookerEditor.setPreviewOptions({
previewEvent : function () {
alert("定義預覽事件處理方法");
},
addEventBefore : function () {
alert("預覽事件之前執行方法");
},
addEventAfter : function () {
alert("預覽事件之後執行方法");
}
});
</script>
29、實況模式事件
<script type="text/javascript">
// 設置實況事件屬性
ibookerEditor.setLiveOptions({
liveEvent : function () {
alert("定義實況事件處理方法");
},
addEventBefore : function () {
alert("實況事件之前執行方法");
},
addEventAfter : function () {
alert("實況事件之後執行方法");
}
});
</script>
30、編輯模式事件
<script type="text/javascript">
// 設置編輯事件屬性
ibookerEditor.setEditOptions({
editEvent : function () {
alert("定義編輯事件處理方法");
},
addEventBefore : function () {
alert("編輯事件之前執行方法");
},
addEventAfter : function () {
alert("編輯事件之後執行方法");
}
});
</script>
31、全屏事件
<script type="text/javascript">
// 設置全屏事件
ibookerEditor.setZenOptions({
zenEvent : function () {
alert("定義全屏事件處理方法");
},
addEventBefore : function () {
alert("全屏事件之前執行方法");
},
addEventAfter : function () {
alert("全屏事件之後執行方法");
}
});
</script>
五、修改樣式
對於書客編輯器修改樣式有兩種方式。
1、修改CSS文件
通過瀏覽器的編譯狀態，可以查看書客編輯器的布局代碼，在id為ibooker_editor的Div中添加了一些代碼，如下：
與布局相對應的CSS為：
<link rel="stylesheet" rev="stylesheet" href="ibookereditor/css/ibooker_editor.css" type="text/css" />
或
<link rel="stylesheet" rev="stylesheet" href="ibookereditor/css/ibooker_editor_min.css" type="text/css" />
所以在不改變布局的情況下，可以通過修改對應的CSS樣式文件。
2、自定義布局
自定義布局的意思是，摒棄掉書客編輯器提供的布局，自己寫一個布局，然後調用書客編輯器提供的相應的方法來實現。