Getting Started

Include Iblize on your project

directly using CDN

<script src="https://unpkg.com/iblize/dist/iblize.js"></script>

or install from NPM

$ npm install iblize --save

or manually download from here

Create editor container

Iblize need a div container to hold all elements

<div id="editor"></div>

then set the container width and height. you can also use inline style

#editor { width: 100%; height: 400px }

Create initialization

the first argument can be a string selector or an dom element

// use selector
const iblize = new Iblize("#editor");

// use dom element
const iblize = new Iblize(document.querySelector("#editor"));

the second argument is options.

const iblize = new Iblize("#editor", {
    language: "html",
    // etc
});

see all options

Set editor default value (optional)

you can set editor value programmatically with javascript

iblize.setValue("console.log('Hello World')");

or directly from html (value must be wrapped with comment tag)

<div id="editor"><!--<h1>Hello World</h1>--></div>

Listening change

listen when the editor value changes

iblize.onUpdate((value) => {
  // do anything with value
});

done . if you find bug or if you have a cool idea please tell me