高级用法

1.兼容性

支持 IE8+，及所有现代浏览器

2.使用

2.1添加容器

在页面中添加编辑器的div容器，容器添加属性 `id=‘container’ ` 、 `class=‘kdjs-cont’` 。

添加Html代码

<div id="container" class="kdjs-cont"></div>

添加引用脚本

<script src="lib/Script/jquery-1.9.1.js"></script>

<script src="lib/Script/zrender.js"></script>

<script src="lib/Script/kd-bridge.js"></script>

<script src="lib/Script/kd-js.js"></script>

初始化

使用 `var kd = new kdjs(id,imgFile);` 创建对象。

使用 `initCanvas(width,height)` 方法初始化画板。可以通过修改 `<div class="kdBox f-cb">` 的样式来修改编辑器的宽高 ，例如：`$(".kdjs-kdBox").width(800);`

代码如下：

$(function () {

    var kd = new KD_PALETTE('container');

    //初始化Canvas

    kd.initCanvas(0,600);

});

2.2扩展方法

2.2.1设置语言

使用 `setLang(lang)` 方法设置更改编辑器语言，目前只支持简体中文和英文

代码如下：

$(function () {

    var kd = new KD_PALETTE('container');

    //初始化Canvas

    kd.initCanvas(0,600);

    //设置语言（zh|en），默认为中文

    kd.setLang('en');

});

2.2.2绘制MOL到画板

使用 `setMol(mol)` 方法绘制结构式到画板。

代码如下：

 $(function () {

    var kd = new KD_PALETTE('container');

    //初始化Canvas

    kd.initCanvas(0,600);

    //Mol格式文本

    var context = $("#molContext").val();

    //绘制MOL到画板

    kd.setMol(context);

});

MOL格式文本示例如下：

    KingDraw.mol

      KingDraw2.12D

      0  0  0     0  0              0 V3000

    M  V30 BEGIN CTAB

    M  V30 COUNTS 2 1 0 0 0

    M  V30 BEGIN ATOM

    M  V30 1 C -7.130521 3.942292 0 0 HCOUNT=3

    M  V30 2 C -6.455021 4.332292 0 0 HCOUNT=3

    M  V30 END ATOM

    M  V30 BEGIN BOND

    M  V30 1 1 1 2

    M  V30 END BOND

    M  V30 END CTAB

    M  END

2.2.3获取MOL

使用 `getMol()` 方法获取画板中结构式的MOL文本。

代码如下：

$(function () {

    var kd = new KD_PALETTE('container');

    //初始化Canvas

    kd.initCanvas(0,600);

    //获取MOL

     var molText = kd.getMol();

}); 

2.2.4设置打开结构中文本转MOL的回调方法

编辑器的 `打开结构` 功能可将MOL文本绘制到画板中，编辑器目前只支持MOL文本，不支持其他格式，可以使用 `setContentToMol(fun)` 方法设置文本转MOL的回调方法。

代码如下：

$(function () {

    var kd = new KD_PALETTE('container');

    //初始化Canvas

    kd.initCanvas(0,600);

    //设置打开结构中文本转MOL的回调方法

    kd.setContentToMol(function(cont){

        //转MOL

       cont = contentToMol(cont);

       return cont;

    });

    //文本转MOL方法

    function contentToMol(cont){

        ...

    }

}); 

注：MOL和SMILES格式转换请参照 CHEM HTTP API接口文档

2.2.4清空画板

使用 `clearCanvas()` 方法清空画板。

代码如下：

$(function () {

    var kd = new kdjs('container');

    //初始化Canvas

    kd.initCanvas(0,600);

    //清空画板

    kd.clearCanvas();

});