Creating plugin main HTML file: index.html

Each plugin acts in its own iframe. The editor will connect the index.html file, specified in the config.json plugin configuration file. The index.html file is the plugin entry point, connecting the pluginBase.js file - the base file needed for work with plugins.

Below is an example code for the index.html file (this one is used for Chess plugin, but any other index.html file can be created the same way):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Chess</title>
        <script type="text/javascript" src="../pluginBase.js"></script>
        <script type="text/javascript" src="chess.js"></script>
    </head>
    <body style="width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;">
        <div id="chess" style="margin: 0; padding: 0;"></div>
    </body>
</html>

The <head>...</head> section contains the links to all the scripts and stylesheets necessary for the plugin correct work (both local and remote, if the plugin uses some). It also includes the link to the pluginBase.js base file needed for correct work with the editors and containing the base plugin method work.

The body can contains the <div>...</div> tags with the placeholders where the plugin components will be inserted. The behavior of these plugin components is described in the pluginCode.js file itself.