作者：邹峰立，微博：zrunker，邮箱：[email protected]，微信公众号：书客创作，个人平台：www.ibooker.cc。
当集成书客编辑器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版工具栏的使用。