Build Ketcher Editor Web Page

Q

How to build my own Ketcher editor Web Page?

✍: FYIcenter.com

A

If you want to build your Web page and offer Ketcher as a Chemical Structure Editor in the middle of the page, you can follow this tutorial.

1. Follow the previous tutorial to install Ketcher on your Web server.

2. Create a new HTML document, editor.html, to load and run the Ketcher Chemical Structure Editor in a given "iframe" tag.

<html>
<head>
<title>My Ketcher Editor</title>
</head>
<body>
<p>Hello, please try the Ketcher Chemical Structure Editor below:</p>
<iframe src="/./ketcher/index.html" style="width: 680px; height: 400px;"></iframe>
</body>
</html>

3. Copy editor.html to the Apache Web server where Ketcher was installed:

fyicenter$ sudo cp editor.html /var/www/html

4. Test Ketcher editor page on the Apache Web server by opening "http://localhost/editor.html" URL in a Web browser.

5. Select the "benzene ring" icon from the Ketcher editor menu and click a location inside the editor. You see a benzene ring molecule created.

6. Select the "Save as" icon from the menu and select "Daylight SMILES" format. You see the SMILES string "C1C=CC=CC=1" displayed.

You can continue to play with Ketcher editor.

Build Your Own Ketcher Editor
Build Your Own Ketcher Editor

 

Ketcher JavaScript API

Install Ketcher on Apache Web Server

Introduction to Ketcher

⇑⇑ Ketcher - Chemical Structure Editor

2023-10-05, 539🔥, 0💬