使用kekule.js遇到的问题

1.npm安装后    npm install kekule

• 运行项目时报错 如

 in ./node_modules/kekule/dist/themes/default/images/cursors/rotateSW.cur Module parse failed: Unexpected character ' ' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file) 

是由于项目里不能解析cur格式；

解决方式 ： 只需要在 vue.config.js 里面添加下列代码  （vue-cli 3）

module.exports = {...
其他配置等等
...
，
chainWebpack: config => {  
  config.module 
    .rule('url-loader')      
    .test(/\.(cur)(\?.*)?$/)      
    .use('url-loader')     
    .loader('url-loader')    
    .end()
}
}

• 使用时的参数

a.创建分子参数 ；如下， 标签去除也可以，但是画板中的新建文档的初始字符串就是这个；所以我建议初始字符串用这个

var cmlData = '<cml xmlns="http://www.xml-cml.org/schema"><list id="o1"/></cml>'

function get(params) {  console.log(composer.chemObj) 
 console.log(myMolecule) 
var data = Kekule.IO.saveFormatData(composer.chemObj, 'cml');
console.log(data);debugger}

b. 通过这个函数让 cmlData的数据转化为cml格式， 加载出分子式；

var myMolecule = Kekule.IO.loadFormatData(cmlData, 'cml');

var composer = new Kekule.Editor.Composer(document);
 composer.setCommonToolButtons(['undo','redo','copy','cut','zoomIn','zoomOut','reset']);
composer.setDimension('600px', '400px');
composer.appendToElem(document.getElementById('composer')).setChemObj(myMolecule);

详解

var composer = new Kekule.Editor.Composer(document); 创建出画板实例

 setCommonToolButtons（） 定制工具栏，如果数组为空，则最上方工具栏不显示；

setDimension   定制画板大小，注意值不能太小，不然按钮布局位置会变形，这个数值自行调整

cappendToElem(document.getElementById('composer')).setChemObj(myMolecule); 
在id为composer（为自定义的任意名称id）的节点下  设置画板  分子内容为  myMolecule

c.拿取画板结果数值

这个地方挺蛋疼的，数据是放在 composer.chemObj  这里  

一个简单的demo

效果

代码 ：

//script部分
var cmlData = '<cml xmlns="http://www.xml-cml.org/schema"><list id="o1"/></cml>'var myMolecule = Kekule.IO.loadFormatData(cmlData, 'cml');console.log(myMolecule)var composer = new Kekule.Editor.Composer(document);composer.setCommonToolButtons(['undo','redo','copy','cut','zoomIn','zoomOut','reset']);composer.setDimension('600px', '400px');composer.appendToElem(document.getElementById('composer')).setChemObj(myMolecule);console.log(composer)function get(params) {  console.log(composer.chemObj)  console.log(myMolecule) var data = Kekule.IO.saveFormatData(composer.chemObj, 'cml');console.log(data.length);console.log(data);}

//body部分

<div id="composer" style="margin:20px;border:1px solid black"></div><button onclick="get()">get</button>

vue的代码截图以及效果截图

按照我目前的理解，VUE项目增加画板时，是需要操作dom的；

我的需求是在点击后一个区域后 会生成一个弹窗，弹窗里面会有这个画板。

效果截图：

代码截图：

因为每次点开都会append一个节点，所以要把composer下面的子节点全部删除，即把上一次创建的画板删除