【前端】書客編輯器Web版v1.0 - HTML布局

03-05

作者：鄒峰立，微博：zrunker，郵箱：zrunker@yahoo.com，微信公眾號：書客創作，個人平台：www.ibooker.cc。
本文選自書客創作平台第102篇文章。閱讀原文。

書客創作

當集成書客編輯器Web版v1.0之後，會發現網頁界面上自動生成一個佔滿瀏覽器的編輯器，但是往往這個編輯器的初始化布局並不能滿足所有寫作平台樣式要求，所以需要對布局進行修改，這裡有兩種方式。

第一種方式：修改CSS樣式

通過瀏覽器的編譯狀態，查看書客編輯器Web版v1.0的HTML布局代碼，這時候可以發現界面自動生成一個在id為ibooker_editor的Div標籤，這個Div標籤中添加了以下代碼：

<div id=」ibooker_editor_tools」> <ul class=」editor-mode」> <li class="pull-right help" title="幫助"><a href="http://www.ibooker.cc/article/1/detail" target="_blank"></a></li> <li class="pull-right" title="預覽模式"><a id="editor_preview_mod" class="editor-menu-preview"></a></li> <li class="pull-right" title="實況模式"><a id="editor_live_mod" class="editor-menu-live muted"></a></li> <li class="pull-right" title="編輯模式"><a id="editor_edit_mod" class="editor-menu-edit"></a></li> <li class="pull-right" title="全屏"><a id="editor_zen_mod" class="editor-menu-zen"></a></li> </ul> <ul class=」editor-menu」> <li title="加粗 <strong> Ctrl+B"><a id="editor_bold" class="editor-menu-bold"></a></li> <li title="斜體 <em> Ctrl+I"><a id="editor_italic" class="editor-menu-italic"></a></li> <li title="刪除線 <del> Ctrl+S"><a id="editor_strikeout" class="editor-menu-strikeout"></a></li> <li title="下劃線 <u> Ctrl+U"><a id="editor_underline" class="editor-menu-underline"></a></li> <li title="單詞首字母大寫 Ctrl+Shift+K"><a id="editor_capitals" class="editor-menu-capitals"></a></li> <li title="單詞轉大寫 Ctrl+Shift+H"><a id="editor_uppercase" class="editor-menu-uppercase"></a></li> <li title="單詞轉小寫 Ctrl+Shift+L"><a id="editor_lowercase" class="editor-menu-lowercase"></a></li> <li title="一級標題 <h1> Ctrl+Shift+A"><a id="editor_h1" class="editor-menu-h1"></a></li> <li title="二級標題 <h2> Ctrl+Shift+B"><a id="editor_h2" class="editor-menu-h2"></a></li> <li title="三級標題 <h3> Ctrl+Shift+C"><a id="editor_h3" class="editor-menu-h3"></a></li> <li title="四級標題 <h4> Ctrl+Shift+D"><a id="editor_h4" class="editor-menu-h4"></a></li> <li title="五級標題 <h5> Ctrl+Shift+E"><a id="editor_h5" class="editor-menu-h5"></a></li> <li title="六級標題 <h6> Ctrl+Shift+F"><a id="editor_h6" class="editor-menu-h6"></a></li> <li title="鏈接 <a> Ctrl+L"><a id="editor_link" class="editor-menu-link"></a></li> <li title="引用 <blockquote> Ctrl+Q"><a id="editor_quote" class="editor-menu-quote"></a></li> <li title="代碼 <pre><code> Ctrl+K"><a id="editor_code" class="editor-menu-code"></a></li> <li title="圖片 <img> Ctrl+G"><a id="editor_img" class="editor-menu-img"></a></li> <li title="數字列表 <ol> Ctrl+Shift+O"><a id="editor_ol" class="editor-menu-ol"></a></li> <li title="普通列表 <ul> Ctrl+Shift+U"><a id="editor_ul" class="editor-menu-ul"></a></li> <li title="列表未選中 <check> Ctrl+M"><a id="editor_unselected" class="editor-menu-unselected"></a></li> <li title="列表選中 <check> Ctrl+N"><a id="editor_selected" class="editor-menu-selected"></a></li> <li title="表格 <table> Ctrl+T"><a id="editor_table" class="editor-menu-table"></a></li> <li title="HTML <html> Ctrl+H"><a id="editor_html" class="editor-menu-html"></a></li> <li title="分割線 <hr> Ctrl+R"><a id="editor_hr" class="editor-menu-hr"></a></li> <li title="撤銷 - Ctrl+Z"><a id="editor_undo" class="editor-menu-undo"></a></li> <li title="重做 - Ctrl+Y"><a id="editor_redo" class="editor-menu-redo"></a></li> </ul></div><div id=」ibooker_editor_area」> <textarea id=」editor_content」 placeholder="書客編輯，從這裡開始！" maxlength="5600000"></textarea> <div id=」editor_preview」 class=」ibooker_editor_content「></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。

第二種方法：自定義布局

自定義布局的意思是，摒棄掉書客編輯器Web版提供的布局，自己寫一個布局，然後調用書客編輯器Web版提供的相應方法來實現。

具體的每一個事件的調用方式可以查看書客編輯器Web版工具欄的使用。

Github地址

閱讀原文

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