继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【前端】书客编辑器Web版v1.0 - 安装使用

jeck猫
关注TA
已关注
手记 298
粉丝 74
获赞 402

书客编辑器Web版v1.0的安装使用,只需要简单的四步就可以完成。

第一步:导入文件

下载书客编辑器Web版文件,找到文件夹中ibookereditor文件,将其导入到您项目的根目录。
下载地址:
书客编辑器官网
也可以去Github上下载:
Github书客编辑器Web版

第二步:添加布局

<div id="ibooker_editor"></div>

将以上代码放入Html的body体中。

第三步:引入CSS

<link rel="stylesheet" rev="stylesheet" href="ibookereditor/css/ibooker_editor_min.css" type="text/css" /><link rel="stylesheet" rev="stylesheet" href="ibookereditor/css/ibooker_editor_md_min.css" type="text/css"/>

将以上代码放入Html的head体中。

第四步:引入JS

<script type="text/javascript" src="ibookereditor/ibooker-editor-min-1.0.js"></script>

完成以上过程,集成书客编辑器就完成了。

常用属性初始化

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

<script type="text/javascript">
    window. = function() {        // 初始化书客编辑器
        ibookerEditor.setIbookerEditorOptions({
            isOpenPreview : true, // 否开启预览 true/false
            isHeightFullClient : true, // 编辑器高度是否充满浏览器 true/false
            compileBack : function() { // 预览回调方法 function
                // 获取输入值转义后的Html
                var htmlValue = ibookerEditor.sdConverter.getHtml();
            },
            editorWidth : "100%", // 编辑器的宽度 - 可以设置数字或者百分百
            editorHeight : "100%", // 编辑器的高度 - 可以设置数字或者百分百
            bindTextAreaId : "editor_content", // 绑定输入框ID,默认editor_content
            bindPreviewId : "editor_preview", // 绑定预览框ID,默认editor_preview
            isOpenBoldEvent : true, // 是否开启粗体事件true/false,默认true
            isOpenItalicEvent : true, // 是否开启斜体事件true/false,默认true
            isOpenUnderlineEvent : true, // 是否开启下划线事件true/false,默认true
            isOpenCapitalsEvent : true, // 是否开启单词首字母大写事件true/flase,默认true
            isOpenUppercaseEvent : true, // 是否开启单词转大写事件true/false,默认true
            isOpenLowercaseEvent : true, // 是否开启单词转小写事件true/false,默认true
            isOpenH1Event : true, // 是否开启一级标题事件true/false,默认true
            isOpenH2Event : true, // 是否开启二级标题事件true/false,默认true
            isOpenH3Event : true, // 是否开启三级标题事件true/false,默认true
            isOpenH4Event : true, // 是否开启四级标题事件true/false,默认true
            isOpenH5Event : true, // 是否开启五级标题事件true/false,默认true
            isOpenH6Event : true, // 是否开启六级标题事件true/false,默认true
            isOpenLinkEvent : true, // 是否开启链接事件true/false,默认true
            isOpenQuoteEvent : true, // 是否开启引用事件true/false,默认true
            isOpenCodeEvent : true, // 是否开启代码事件true/false,默认true
            isOpenImgEvent : true, // 是否开启图片事件true/false,默认true
            isOpenOlEvent : true, // 是否开启数字列表事件true/false,默认true
            isOpenUlEvent : true, // 是否开启普通列表事件true/false,默认true
            isOpenUnselectedEvent : true, // 是否开启列表未选中事件true/false,默认true
            isOpenSelectedEvent : true, // 是否开启列表选中事件true/false,默认true
            isOpenTableEvent : true, // 是否开启表格事件true/false,默认true
            isOpenHtmlEvent : true, // 是否开启Html事件true/false,默认true
            isOpenHrEvent : true, // 是否开启分割线事件true/false,默认true
            isOpenUndoEvent : true, // 是否开启撤销事件true/false,默认true
            isOpenRedoEvent : true, // 是否开启重做事件true/false,默认true
            isOpenHelpEvent : true, // 是否开启帮助事件true/false,默认true
            isOpenPreviewEvent : true, // 是否开启预览模式事件true/false,默认true
            isOpenLiveEvent : true, // 是否开启实况模式事件true/false,默认true
            isOpenEditEvent : true, // 是否开启编辑模式事件true/false,默认true
            isOpenZenEvent : true // 是否开启全屏事件true/false,默认true
        });
    };
</script>

原文链接:http://www.apkbus.com/blog-613740-77105.html

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP