帮助与文档 > 产品文档 > 多文本编辑器 > JS SDK 文档

有道智云编辑器 web SDK 文档

有道智云编辑器 SDK 简介

有道编辑器SDK是有道开放平台提供的云服务之一,是有道编辑器接口的一种实现。拥有多年产品化实践经验,服务于有道云笔记千万用户。

通过SDK接入优势:

  1. 支持常用的编辑功能,满足绝大多数的内容编辑场景
  2. 支持iOS、Android和桌面端WebKit内核的浏览器
  3. 自由格式的文档结构定义

集成前提

开始集成SDK之前开发者需要登录有道开放平台(http://ai.youdao.com),创建应用获取应用ID(或者通过运营人员获取应用ID),以便使用编辑器服务。

编辑器web sdk由如下几个文件组成:

文件说明
bulb.min.css编辑器样式文件(必选)
bulb.min.js编辑器核心库(必选)

SDK集成步骤

SDK库引入

方法一
<script> 引入

<link rel="stylesheet" href="/path/to/bulb.min.css">
<script type="text/javascript" src="/path/to/bulb.min.js"></script>

方法二
Module

import '/path/to/bulb.min.css'
import BulbEditor from '/path/to/bulb.min.js'

2. 权限添加

import '/path/to/bulb.min.css'
import BulbEditor from '/path/to/bulb.min.js'

(authBulbEditor({
    url,
    pkn,
    appKey,
    version,
    sdkVersion,
    appSecret,
})).then((BulbEditor) => {
    editor = new BulbEditor({
        el: document.getElementById('editor-container'),
    });
}) 

Web SDK API

BulbEditor配置项说明

BulbEditor可以通过在编辑器实例化时定制编辑器的特性

  • el {HTML element} [必须] 设置编辑器的挂载对象
  • disableContextMenu {Boolean} [默认值:false] 是否禁止编辑器默认右键菜单操作
  • disableAttachDownload {Boolean} [默认值:false] 是否禁止编辑器默认附件下载操作
  • disableImageDownload {Boolean} [默认值:false] 是否禁止编辑器默认图片下载操作
  • disableOpenLink {Boolean} [默认值:false] 是否禁止编辑器默认打开链接操作
  • disableInsertLink {Boolean} [默认值:false] 是否禁止编辑器默认插入超链接窗口
  • disableClipError {Boolean} [默认值:false] 是否禁止编辑器默认剪切板错误提醒

方法

getContent(options)

用于获取编辑器内容

参数

  • options <Object>

    • type <String> json | xml | plain 表示要获取哪种格式的内容,默认 xml
    • [async] <Boolean> 默认 false

返回值

asynctrue时返回 <Promise> 其他情况返回 <String>

实例

editor
.getContent({
    type: 'json',
    async: true,
})
.then(json => {
    console.log(json)
})

setContent(content, options)

用于设置编辑器内容,也会将编辑状态重置

参数

  • content <String | Object>
  • options <Object>

    • type <String> json | xml 表示要设置哪种格式的内容,默认 xml
    • [async] <Boolean> 默认 false

返回值

asynctrue时返回 <Promise> 其他情况无返回值

实例

const xml = editor.getContent()

editor
.setContent(xml, {
    async: true,
})
.then(() => {
    console.log('done')
})

insertAttachment(options)

用于插入附件操作

参数

  • options <Object>

    • resource <String> 附件资源的地址,一般用于附件的下载
    • fileName <String> 附件名
    • fileLength <Number> 附件大小,数量级比特
    • [src] <String> 附件缩略图地址,编辑器会自行绘制附件缩略图,该值暂无实际用处

实例

editor.insertAttachment({
    resource: 'http://path.ext',
    src: 'http://thumbnail.jpg',
    fileName: '文件名',
    fileLength: 1024,
})

insertImage(options)

用于插入图片操作

参数

  • options <Object>

    • src <String> 图片的地址

实例

editor.insertImage({
    src: 'http://image.jpg',
})

事件

before-download-attachment

当用户点击附件下载按钮或其他请求下载附件之前触发

提供参数

  • result <Object>

    • url <String> 附件的下载链接地址
    • name <String> 附件的名称

实例

editor.on('before-download-attachment', (result) => {
    console.log(result.url, result.name)
})

before-download-image

当用户点击下载图片按钮或其他请求下载图片之前触发

提供参数

  • result <Object>

    • url <String> 附件的下载链接地址

实例

editor.on('before-download-image', (result) => {
    console.log(result.url)
})

before-insert-link

当用户点击插入链接按钮或其他修改链接按钮之前触发

提供参数

  • originUrl <String> 原链接地址
  • next <Function> 回调函数,如需要自定义插入或修改链接窗口,传入需要插入的url

实例

editor.on('before-insert-link', (originUrl, next) => {
    console.log(originUrl)
    var url = 'note.youdao.com';
    next(url);
})

before-open-link

当用户点击链接或其他请求打开链接之前触发

提供参数

  • result <Object>

    • href <Sring> 链接的地址

实例

editor.on('before-open-link', (result) => {
    console.log(result.href)
})

clipboard-error

通过右键菜单或其他情况非快捷键触发粘贴、复制、剪切操作失败时触发,目前由于浏览器安全策略粘贴操作一定会失败

提供参数

  • type <String> cut | copy | paste 出错的操作类型
  • next <Function> 如果需要在提示完成后恢复编辑器焦点,可以调用该方法

实例

editor.on('clipboard-error', (type, next) => {
    alert('复制粘贴错误类型:' + type)
    next()
})

content-change

当文件内容发生变化时触发

提供参数

实例

editor.on('content-change', () => {
    console.log('Content change!')
})

context-menu

当需要显示右键菜单时触发

提供参数

  • options <Object>

    • left 相对于窗口的距离
    • top 同上
    • items <Array> 菜单列表, 内含多个菜单信息的<Object>

      • <Object>

        • index <String> 功能序列号
        • label <String> 菜单别名
        • name <String> 菜单名
        • type <Number> 0:普通菜单 2:子菜单 3:分隔符
  • next <Function> 回调函数,需要传入点击的菜单的序号,如第一个菜单则在用户点击后执行 next(items[0].index)

实例

editor.on('before-context-menu', (options, next) => {
    // do something...
    next(item[0].index)
})

require-attachment

请求插入附件时触发

提供参数

  • next <Function> 作为回调函数接收<Object>类型附件信息

    • <Object>

      • resource <String> 附件的下载地址
      • [fileName] <String> 附件名
      • [fileLength] <Number> 附件大小
      • [src] <String> 附件缩略图地址

实例

editor.on('require-attachment', (next) => {
    // do something...
    next({
        resource: 'http://path.ext',
        fileName: '文件名',
        fileLength: 1024,
        src: 'http://thumbnail.jpg',
    })
})

require-image

请求插入图片操作时触发

提供参数

  • <Function> 作为回调函数接收<Object>类型图片信息

    • <Object>

      • src <String> 图片地址

实例

editor.on('require-image', (next) => {
    // do something...
    next({
        src: 'http://image.jpg',
    })
})

preview-image

双击图片触发图片预览

提供参数

  • options <Object>

    • curIndex <Number> 当前图片在所有图片资源的位置索引
    • items <Object> 所有图片的信息

      • index <Number> 图片位置索引
      • name <String> 图片标题
      • src <String> 图片URL

实例

editor.on('preview-image', (options) => {
    // do something...
    console.log('preview-image', options)
})

常见问题及注意事项

1. 编辑器无法加载?

检查下编辑器授权接口回调的错误信息,保证申请的appKey是有效且提前绑定了。

  • 返回110

应用没有绑定服务实例,可以新建服务实例,绑定服务实例。

  • 返回108

appKey无效,注册账号, 登录后台创建应用和实例并完成绑定, 可获得应用ID和密钥等信息,其中应用ID就是appKey( 注意不是应用密钥)

错误码

错误码含义
101缺少必填的参数,出现这个情况还可能是et的值和实际加密方式不对应
102不支持的语言类型
103翻译文本过长
104不支持的API类型
105不支持的签名类型
106不支持的响应类型
107不支持的传输加密类型
108appKey无效,注册账号, 登录后台创建应用和实例并完成绑定, 可获得应用ID和密钥等信息,其中应用ID就是appKey( 注意不是应用密钥)
109batchLog格式不正确
110无相关服务的有效实例
111开发者账号无效
113q不能为空
201解密失败,可能为DES,BASE64,URLDecode的错误
202签名检验失败
203访问IP地址不在可访问IP列表
301辞典查询失败
302翻译查询失败
303服务端的其它异常
401账户已经欠费停

版本更新记录

上线日期版本号更新内容
20180209v1.0.0上线编辑器
文档是否有帮助解决问题?

如有其它疑问,可在此提交意见和反馈
详细描述(选填)
联系邮箱(选填)
 
有道智云平台介绍
网易有道旗下一个为开发者、企业和政府机构等提供自然语言翻译、文字识别OCR等服务以及行业解决方案的云服务平台,致力于提供安全、可靠和高效的云服务。
联系方式
联系电话:010-8255-8901
商务合作:
投诉反馈:
地址:北京市海淀区西北旺东路10号院 中关村软件园二期西区7号 网易(北京)公司
微信公众号
微信小程序
 
 
 
©2017 网易公司 京ICP证080268号