书客编辑器

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

一、简介

书客编辑器是一款基于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文件

通过浏览器的编译状态,可以查看书客编辑器的布局代码,在id为ibooker_editor的Div中添加了一些代码,如下:

与布局相对应的CSS为:

所以在不改变布局的情况下,可以通过修改对应的CSS样式文件。

2、自定义布局

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180115G0PLEU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券