【前端】书客编辑器Web版v1.0 - HTML布局

作者:邹峰立,微博: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地址
阅读原文


微信公众号:书客创作

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值