* based on ACE Editor
* easy setup
* supports multiple editors on one page
* configuration via JS object or HTML attributes
Copy `editr` folder to root of your website.
Add this in ``:
and this before ``:
Now add sample editor:
and start Editr with jQuery:
* `path` This is used as default path for projects so you don't have to add it as html attribute. HTML attribute `data-path` will overwrite this default.
* `theme` ACE Editor theme
* `callback` A function that is called after files are loaded.
To load Editr on your site, create a div with this attributes:
* `class="editr"` Used as hook for loading Editr
* `data-path`(optional) Path to folder with projects
* `data-hide`(optional) This attribute allows you to hide elements from editr toolbar. Values: `all, html, css, js`.
* `data-item` Name of project inside projects folder
* `data-files` List of file names separated by `;` which you want to show inside editor. If file name is preceeded with `!` then this file will be loaded inside editor but it won't be visible and editable. You an also put here paths to files e.g. `js/script.js`.
This will load `editr/items/flat-ui/switch.html`.
First html file(`switch.html` in this case) is used as main preview.
In this example, `normalize.css` will be added to preview but it won't be visible or editable.