Silex Editor API

This API is available in the editor. You can add Silex to a new project and use Silex editor's API to create new features or customize Silex editor.

Please ask questions about that in the issues and add the answers you get here.

Here is a first draft of documentation.

Test

In order to test Silex Editor API:

1. Open Silex editor
2. Open the browser console, type silex
3. This will display all the functions of the API
4. For example you can type silex.openPage(silex.getPages()[0]) which will open the first page of the opened website

Setup

Start with a new project as described in How To Add Silex To Your Node.js Project

To include a JS script in the editor, create a new Pug template, let's say index.pug:

// /index.pug
extends ../node_modules/silex-website-builder/src/html/index.jade

append body-end
  script(type='text/javascript' src='client.js')

Then add this script to your project's package.json so that the template is compiled to a new folder as pub/index.html

...
 "scripts": {
    "start": "node index.js",
    "build:html": "pug index.pug --out pub/"
...

Make it so that your new HTML page will be served in place of the default index.html of Silex. To do that, change your startup script index.js like so:

// index.js
const { SilexServer, Config } = require('silex-website-builder');

const config = new Config();
const silex = new SilexServer(config);

// serve the pub folder
// this will override the original index.html file served by silex
const serveStatic = require('serve-static')
silex.app.use('/', serveStatic(path.resolve('./pub')))

silex.start(function() {
  console.log('server started');
});

Finally create the script client.js you injected in Silex in the first step

// client.js

silex.subscribeSite(function() {
  alert('a site was open: ' + silex.getSite().title);
})

Now restart your Silex Server, load Silex in a browser and open a website. This what you should see:

API documentation

Once you have a custom script running in Silex editor (see setup section), use the silex object to call Silex Editor API methods.

For example this will display the title of the website currently opened in the editor:

alert('a site was open: ' + silex.getSite().title);

For now you need to look in Silex source code to understand the exposed functions:

1. Open Silex editor
2. In the browser console, type silex
3. This will display all the functions of the API
4. For each function, make a search in Silex source code and check the source
5. Please help document this here