1. 先确保HTML页面引用了对应的JS资源：

zrender.js

jquery.js

kd-bridge.js

kd-palette.js

kd-palette-core.js

2. 实例化new KD_PALETTE对象，并以一个DOM ID作为初始化参数：

const palette = new KD_PALETTE('container');

3. 注册画板的就绪和错误事件：

palette.ready(() => {

...

});

palette.error((e)=>{

...

});

4. 初始化画板

palette.initialization(appId,timestamp,nonce,signature);

注意：这里建议初始化签名由后端生成，KingDraw开放平台已提供了几种后端签名的示例，细节请访问：签名规则

5. 设置画板大小

初始化成功会回调palette.ready，之后可以通过palette.initCanvas(width,height)来设置画板的宽高

6. 画板的显示和隐藏

通过控制DOM ID的显示和隐藏，来控制JS编辑器的显示隐藏状态，如：$('#container').show()、$('#container').hide()

7. 获取画板绘制的化学结构

当前版本结构式只支持mol格式的获取，直接调用palette.getMol()即可获取结构式内容，如需要更多格式，请参照：高级用法