If you run into troubles, got a suggestion, or issue, please e-mail editor@webtigerteam.com

# Embedding the editor into a web page

## Using a Iframe

<iframe src="https://webide.se/?embed=true&disable=menu,file_tabs" width="600" height="400" border="0" class="editor"></iframe>

Some editor option can be set via query string options.

## Script that replace textarea

Put the following script in the page header. It will replace any textarea with class="editor". The script will also disable a bunch of plugins to make the editor feel more lightweight.

<script src="https://webide.se/embed.js"></script>

Then insert the editable text as a textarea.

<textarea class="editor" rows="20" cols="80" name="code.js">alert("Hello World");</textarea>

The script will automatically update the content of the textarea when you edit the file in the editor!
You can access the text by accessing the textarea value, for example:

document.getElementsByName('code.js')[0].value

### Demo

See the textarea below, it should have been replaced by the editor. Try typing something then click "Run code" to evaulate it:

alert("Hello World");

## Communicating with the editor

Due to browser permissions it's not possible to interact with the editor via iframe.
You can however use postMessage.

### openFile

Opens a file:

iframe.contentWindow.postMessage({"openFile": {name: "file.txt",content: "Hello world!"}}, "*");

And when the file is changed, the content is sent back:

window.addEventListener("message", function receiveMessage(windowMessageEvent) { var msg = windowMessageEvent.data; if(msg.fileUpdate) { console.log("fileUpdate: name=" + msg.fileUpdate.name + " content=" + msg.fileUpdate.content); } });

### disablePlugin

Disables a plugin.

iframe.contentWindow.postMessage({"disablePlugin": "Plugin description"}, "*");

- ⬅Go back
- ⬆Index