vue封装ketcher 化学式、分子式编辑器

ketcher是一个化学结构式编辑器(github地址),ketcher插件提供了传统的html standalone版、npm包react版,并没有npm包vue版,集成到vue的原理是将standalone版嵌到iframe中,通过拿到iframe中的ketcher对象,从而获取到化学式。

预期ketcher组件功能

ketcher组件可以被引用,是个按钮,点击后,弹出对话框,输入化学式后,可获取到化学式的molfile,点击确定可返回给父组件所选化学式的molfile。

下载ketcher

为了稳定,没有下载最新的2.8.0,而是下载了Ketcher 2.6.4 standalone,下载后解压放到vue项目中的public目录下,如下图
vue封装ketcher 化学式、分子式编辑器_第1张图片

创建化学式组件

在组件目录内创建化学式组件src/components/chemical-structure-editor/index.vue