作者：鄒峰立，微博：zrunker，郵箱：zrunker@yahoo.com，微信公眾號：書客創作，個人平臺：www.ibooker.cc。
一、簡介
書客編輯器是一款基於Markdown標記語言的富文字編輯器，簡易介面設定，強大的操作功能，適用於幾乎所有寫作平臺。
二、安裝使用
書客編輯器安裝和使用過程相當簡潔，只需要簡單的四步就可以完成。
1、匯入檔案
首先要下載相應的檔案。
下載書客編輯器Web版檔案，找到資料夾中ibookereditor檔案，將其匯入到你專案的根目錄。
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檔案
通過瀏覽器的編譯狀態，檢視書客編輯器Web版v1.0的HTML佈局程式碼，這時候可以發現介面自動生成一個在id為ibooker_editor的Div標籤，這個Div標籤中新增了以下程式碼：
這些程式碼就是自動生成書客編輯器Web版介面的程式碼。而要修改書客編輯器樣式，就可以通過修改這些佈局程式碼的CSS樣式。其中與佈局相對應的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" />
複製程式碼所以在不改變書客編輯器Web版整體佈局的情況下，可以通過修改區域性對應的CSS樣式檔案ibooker_editor.css。
2、自定義佈局
自定義佈局的意思是，摒棄掉書客編輯器Web版提供的佈局，自己寫一個佈局，然後呼叫書客編輯器Web版提供的相應方法來實現。
具體的每一個事件的呼叫方式可以檢視書客編輯器Web版工具欄的使用。