笔者很早就有在Markdown编辑器中引入化学结构式绘制的想法。本着不自己造轮子的想法，我在GitHub上找到了一个成熟的JavaScript化学式绘制器RDKit.js，也尝试了用JavaScript去调用它。

首先电脑上需要安装node.js以及包管理器npm。安装完成后命令行运行：

npm i @rdkit/rdkit -g

全局安装RDKit.js包。安装后再node.js的安装目录下找到node_modules/@rdkit/rdkit/dist/RDKit_minimal.js和node_modules/@rdkit/rdkit/dist/RDKit_minimal.wasm，这两个文件就是最主要的文件。

依照官网上的示例，通过下面的HTML就可以导入RDKit包并使用。

①采用非本地的.js和.wasm文件

由于直接在浏览器打开HTML文件会限制JavaScript代码对本地文件的访问及跨域保护，可以直接使用网络上的文件。即：

<!DOCTYPE html>

<head></head>

<script src="https://unpkg.com/@rdkit/rdkit/dist/RDKit_minimal.js"></script>
<script>
  onRuntimeInitialized: initRDKitModule().then(function (instance) {
      RDKitModule = instance;
      console.log('version: ' + RDKitModule.version());
  });
</script>

<body>
    <button onclick="draw()">DRAW</button>
    <div class="aaa"></div>
    <script src="./RDKitc.js"></script>
</body>

其中使用的RDKitc.js文件如下：

function draw() {
    var divc = document.querySelector("div.aaa");
    var smiles = "CC(=O)Oc1ccccc1C(=O)O";
    var mol = RDKitModule.get_mol(smiles);
    var dest = document.getElementById("example-1-output");
    var svg = mol.get_svg();
    divc.innerHTML = "<div id='drawing'>" + svg + "</div>";
}

这样就可以绘制一个如下的化学结构式：

rdkit.js的使用尝试_html

采用的是smiles字符串的形式来解析化学物质。

②采用本地文件

如果要使用本地文件，首先将上述的RDKit_minimal.js和RDKit_minimal.wasm文件放置于自己的.html文件同一目录下；然后用如下的HTML代码：

<!DOCTYPE html>

<head></head>

<script src="./RDKit_minimal.js"></script>
<script>
  onRuntimeInitialized: initRDKitModule().then(function (instance) {
      RDKitModule = instance;
      console.log('version: ' + RDKitModule.version());
  });
</script>

<body>
    <button onclick="draw()">DRAW</button>
    <div class="aaa"></div>
    <script src="./RDKitc.js"></script>
</body>

然后使用npm安装http-server：

npm install --global http-server

切换到HTML文件目录下后，命令行输入：

http-server

显示开启成功后访问http://127.0.0.1:8080进入主页，手动打开对应的HTML文件即可正常使用。