【前端】書客編輯器Web版v1.0 - 安裝使用

吾非言發表於2018-02-25
前端Web

作者：鄒峰立，微博：zrunker，郵箱：zrunker@yahoo.com，微信公眾號：書客創作，個人平臺：www.ibooker.cc。

本文選自書客創作平臺第101篇文章。閱讀原文 。

書客創作

書客編輯器Web版v1.0的安裝使用，只需要簡單的四步就可以完成。

第一步：匯入檔案

下載書客編輯器Web版檔案，找到資料夾中ibookereditor檔案，將其匯入到您專案的根目錄。 下載地址： 書客編輯器官網 也可以去Github上下載： Github書客編輯器Web版

第二步：新增布局

<div id="ibooker_editor"></div>
複製程式碼

將以上程式碼放入Html的body體中。

第三步：引入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"/>
複製程式碼

將以上程式碼放入Html的head體中。

第四步：引入JS

<script type="text/javascript" src="ibookereditor/ibooker-editor-min-1.0.js"></script>
複製程式碼

完成以上過程，整合書客編輯器就完成了。

常用屬性初始化

以下是對常用的一些屬性進行初始化：通過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>
複製程式碼

Github地址 閱讀原文

微信公眾號：書客創作

相關文章