书客编辑器Web版v1.0

书客编辑器，它以简易的界面，强大的功能得到广泛应用。书客编辑器适用于几乎所有与书写相关的网站或者应用使用。

一、简介

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

二、安装使用

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

1、导入文件

首先要下载相应的文件。

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

下载地址：

书客编辑器官网 - 【http://editor.ibooker.cc/editor/download】

Github地址 - 【https://github.com/zrunker/ibookerEditorWeb】

2、添加布局

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

3、引入CSS样式

在head体引入以上CSS样式。

4、引入JS文件

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

运行结果样式如下：

三、常用属性设置

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

四、其他属性设置

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

1、预览相关事件

手动预览

获取Html

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版工具栏的使用【http://editor.ibooker.cc/editor/web/tools】。

Github地址【https://github.com/zrunker/ibookerEditorWeb/】