【前端】书客编辑器Web版v1.0-白红宇

作者：邹峰立，微博：zrunker，邮箱：zrunker@yahoo.com，微信公众号：书客创作，个人平台：。

本文选自平台第103篇文章。。

一、简介

书客编辑器是一款基于Markdown标记语言的富文本编辑器，简易界面设置，强大的操作功能，适用于几乎所有写作平台。

二、安装使用

书客编辑器安装和使用过程相当简洁，只需要简单的四步就可以完成。

1、导入文件

首先要下载相应的文件。

下载书客编辑器Web版文件，找到文件夹中ibookereditor文件，将其导入到你项目的根目录。

下载地址：

2、添加布局


    
复制代码

需要在body体内添加以上代码。

3、引入CSS样式


    
    复制代码

在head体引入以上CSS样式。

4、引入JS文件

复制代码

最后引入以上JS文件，这样书客编辑器就引入到你的项目当中了。

运行结果样式如下：

三、常用属性设置

以下是对常用的一些属性进行初始化：通过JS动态操作。

复制代码

四、其他属性设置

其他属性主要是针对于，书客编辑器顶部工具栏而设置的。

1、预览相关事件

手动预览

var textArea = document.getElementById("editor_content");var html = ibookerEditor.sdConverter.converToHtml(textArea.value);document.getElementById("editor_preview").innerHTML = html;复制代码

获取Html

var html = ibookerEditor.sdConverter.getHtml();复制代码

2、粗体事件

复制代码

3、斜体事件

复制代码

4、删除线事件

复制代码

5、下划线事件

复制代码

6、单词首字母大写事件

复制代码

7、单词转大写事件

复制代码

8、单词转小写事件

复制代码

9、一级标题事件

复制代码

10、二级标题事件

复制代码

11、三级标题事件

复制代码

12、四级标题事件

复制代码

13、五级标题事件

复制代码

14、六级标题事件

复制代码

15、链接事件

复制代码

16、引用事件

复制代码

17、代码事件

复制代码

18、图片事件

复制代码

19、数字列表

复制代码

20、普通列表

复制代码

21、列表未选中事件

复制代码

22、列表选中事件

复制代码

23、表格事件

复制代码

24、HTML事件

复制代码

25、分割线事件

复制代码

26、撤销事件

复制代码

27、重做事件

复制代码

28、预览模式事件

复制代码

29、实况模式事件

复制代码

30、编辑模式事件

复制代码

31、全屏事件

复制代码

五、修改样式

对于书客编辑器修改样式有两种方式。

1、修改CSS文件

通过浏览器的编译状态，查看书客编辑器Web版v1.0的HTML布局代码，这时候可以发现界面自动生成一个在id为ibooker_editor的Div标签，这个Div标签中添加了以下代码：

这些代码就是自动生成书客编辑器Web版界面的代码。而要修改书客编辑器样式，就可以通过修改这些布局代码的CSS样式。其中与布局相对应的CSS样式文件为：


    
    复制代码

所以在不改变书客编辑器Web版整体布局的情况下，可以通过修改局部对应的CSS样式文件ibooker_editor.css。

2、自定义布局

自定义布局的意思是，摒弃掉书客编辑器Web版提供的布局，自己写一个布局，然后调用书客编辑器Web版提供的相应方法来实现。

具体的每一个事件的调用方式可以查看。