🎨 Ketcher 化学结构式绘制演示

开源在线结构编辑器,可嵌入网页应用

← 返回首页

📖 什么是 Ketcher?

Ketcher 是一个开源的在线化学结构编辑器,由 EPAM Systems 开发。它提供了完整的化学结构绘制和编辑功能,可以轻松嵌入到网页应用中。主要特性包括:

  • 完整的化学结构编辑器
  • 直观的用户界面
  • 支持多种文件格式(MOL, SDF, SMILES, InChI 等)
  • 反应式绘制
  • 模板库
  • 完全开源免费

✏️ 交互式结构编辑器

下方是一个完整的 Ketcher 化学结构编辑器,你可以直接在其中绘制和编辑分子结构:

🚀 快速加载示例

点击下方按钮快速加载预定义的分子结构:

🔤 SMILES 字符串输入

在下方输入 SMILES 字符串,然后点击"加载"按钮来在编辑器中显示分子结构:

💾 导出结构

将当前编辑的结构导出为不同格式:

💻 代码示例

基本用法

// 1. 引入 Ketcher 库 <link rel="stylesheet" href="https://unpkg.com/ketcher/dist/ketcher.min.css"> <script src="https://unpkg.com/ketcher/dist/ketcher.min.js"></script> // 2. 创建编辑器容器 <div id="ketcher"></div> // 3. 初始化编辑器 var ketcher = new Ketcher(document.getElementById('ketcher'));

从 SMILES 加载

// 从 SMILES 字符串加载分子 ketcher.setMolecule('CCO'); // 乙醇 // 或者使用 Promise ketcher.setMolecule('CCO').then(function() { console.log('分子已加载'); });

导出结构

// 导出为 SMILES ketcher.getSmiles().then(function(smiles) { console.log('SMILES:', smiles); }); // 导出为 MOL ketcher.getMolfile().then(function(mol) { console.log('MOL:', mol); }); // 导出为 InChI ketcher.getInchi().then(function(inchi) { console.log('InChI:', inchi); }); // 导出为 SVG ketcher.getSvg().then(function(svg) { console.log('SVG:', svg); });

监听结构变化

// 监听结构变化事件 ketcher.editor.subscribe('change', function() { console.log('结构已改变'); // 获取当前结构 ketcher.getSmiles().then(function(smiles) { console.log('当前 SMILES:', smiles); }); });

🌟 主要功能特性

功能 说明
完整编辑器 提供完整的化学结构绘制和编辑功能
直观界面 用户友好的图形界面
文件格式支持 支持 MOL, SDF, SMILES, InChI, SVG 等多种格式
反应式绘制 可以绘制化学反应方程式
模板库 内置常用化学结构模板
API 支持 提供完整的 JavaScript API
← 返回首页