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

weixin_33831196發表於2018-02-25
前端WebHTML

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

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

3480018-5af3bd9b0ac9cf3b.jpg
書客創作

當整合書客編輯器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地址
閱讀原文

3480018-aaaca8b35890252b.jpg
微信公眾號：書客創作

相關文章