Customizable html editor written in plain JS. You can think about MS FrontPage in web. This package contains two build.
Note: not production ready
- Core build – provide only minimum for building your own editor. This build is useless without addons.
- Normal build. It contains all usefull addons that can be disabled by setting options. Typicaly you want to use it.
This documentation describes Normal build and assumes you use webpack for buildig your app.
npm install --production editro
const Editro = require('editro')(); // note: this is factory
// Add addons here
// require('editro/addons/codeMirror')(Editro, CodeMirror);
const root = document.getElementById('html-editor');
const editro = new Editro(root, {
// options here
});
naming: Editro – class, editro – instance.
Set option value on instance.
Get option value.
Return DOM node that contains editro.
Return edited html.
Set html.
Select elemetn in editro by query selector.
You can call editro.selectByQuery('body')
to edit body element.
Save and restore data to/from local storage
Used by others.
Can be used to create panels. Constructor receive two args: editro and options.
options.position
Top panel for global buttons. Require addon/panel
Add new instrument to panel. instrument should contain two methods:
getNode() : Node
should retun dom node for instrumentgetGroup() : string
should retun string tag
Allow you create new instruments on panel in easy way. Example:
editro.addInstrument(new Editro.type.Instrument(editro, {
icon: require('../../images/arrows-alt.svg'),
title: 'Fullscreen',
onClick: () => e.setOption('fullScreen', !e.getOption('fullScreen')),
group: 'panels'
}));
Constructor receive two args: editro and options.
Create tabs in toolbar. Can be enabled or disabled by option.
Toolbox panes. Used to hold controllers. When created it checks
Editro.controllers
object to obtain controllers.
Each value of this object should be a controller instance.
Helper. Used for extending.
Node param is optional.
Should be overrided. Called when new element selected.
Show/hide controller.
Return DOM node fro this controller.
Should be overrided.
You can toggle fullscreen
editro.setoption('fullScreen', true);
Redo
Undo
Define code prerocessors. Editro call them before paste html to/ get html from iframe. They changed scripts tag to prevent JS execution.
Takes array of Files (from form). Returns Promise with array of base64 strings for these files. Can be overrided for different behavior.
Create simple wywisig editro (Quill) for editing text nodes.
Create controller for font family. You can add additional fonts.
Editro.defineHelper('font', '"Super font", sans-serif', {
fontFamily: '"Super font", sans-serif',
source: 'http://' // link to css with font
})
Replace editro.upload
method. Allow uploding to server.
Specify address via uploadUrl option.
Max size via uploadMaxSize option.
CodeMirror integration
./node_modules/webpack-dev-server/bin/webpack-dev-server.js --port 3003 --config webpack.dev.config.js
You can use different versions of Editro depending on the instance.
- Make changes to the code.
- Publish it as a new version
- Use new version in your application. Publish on a test instance and then test integration integrity.