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

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

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

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

第一步：導入文件

下載書客編輯器Web版文件，找到文件夾中ibookereditor文件，將其導入到您項目的根目錄。

也可以去Github上下載：

第二步：添加布局

<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地址

閱讀原文

http://weixin.qq.com/r/vC5pcbnEK_RUrf0S93uu (二維碼自動識別)