📖 什么是 Kekule.js?
Kekule.js 是一个开源的 JavaScript 化学信息学库,专门用于在网页中表示、绘制、编辑和搜索化学结构。它支持:
- 完整的化学结构编辑器
- 多种文件格式支持(MOL, SDF, SMILES, InChI 等)
- 结构式查看器和渲染器
- 化学结构搜索和匹配
- 反应式绘制
- 完全开源免费
🎨 基础示例
示例 1: 结构查看器 - 苯环
示例 2: 结构查看器 - 水分子
示例 3: 结构查看器 - 咖啡因
✏️ 交互式结构编辑器
下方是一个完整的化学结构编辑器,你可以直接在其中绘制和编辑分子结构:
🔤 SMILES 字符串输入
在下方输入 SMILES 字符串,然后点击"加载"按钮来在编辑器中显示分子结构:
💻 代码示例
基本用法 - 查看器
// 1. 引入 Kekule.js 库
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kekule/dist/themes/default/kekule.css">
<script src="https://cdn.jsdelivr.net/npm/kekule/dist/kekule.min.js"></script>
// 2. 创建查看器
<div id="viewer" style="width:500px; height:400px;"></div>
// 3. 初始化并加载分子
var viewer = new Kekule.ChemWidget.Viewer(document.getElementById('viewer'));
var mol = Kekule.IO.loadFormatData('CCO', 'smi'); // 从 SMILES 加载
viewer.setChemObj(mol);
结构编辑器
// 创建可编辑的结构编辑器
var editor = new Kekule.Editor.Composer(document.getElementById('editor'));
editor.setChemObj(Kekule.IO.loadFormatData('C1=CC=CC=C1', 'smi'));
从 MOL 文件加载
// 从 MOL 文件内容加载
var molContent = '...'; // MOL 文件内容
var mol = Kekule.IO.loadFormatData(molContent, 'mol');
viewer.setChemObj(mol);
导出结构
// 导出为 SMILES
var mol = editor.getChemObj();
var smiles = Kekule.IO.saveFormatData(mol, 'smi');
console.log(smiles);
// 导出为 MOL
var molFile = Kekule.IO.saveFormatData(mol, 'mol');
console.log(molFile);
🌟 主要功能特性
| 功能 | 说明 |
|---|---|
| 结构编辑器 | 完整的交互式化学结构编辑器 |
| 结构查看器 | 只读的分子结构查看器 |
| 文件格式支持 | 支持 MOL, SDF, SMILES, InChI, CML 等多种格式 |
| 结构搜索 | 支持子结构搜索和相似度搜索 |
| 反应式绘制 | 可以绘制化学反应方程式 |
| 开源免费 | 完全开源,可自由使用和修改 |
🔗 更多资源
• Kekule.js 官方网站: https://partridgejiang.github.io/Kekule.js/