Download the PHP package tobento/js-editor without Composer

JS Editor

Simple JavaScript WYSIWYG HTML Editor with inlined toolbar only.

The editor does not style the content by using inline style attributes. Instead it uses classes only. This has multiple advantages:

• easily customize content by its classes
• using strong Content-Security-Policy blocking style-src
• limits user to keep corporate design

You may visit the docs.tobento.ch/js-editor page for demo.

Table of Contents

• Getting started
  • Browser support
• Documentation
  • Basic Usage
  • Custom Editor
  • Available Plugins
    • Basic Plugins
    • Table Plugin
    • Styles Plugin
  • Create Plugin
  • Events
    • Global Events
    • Editor Events
  • API
    • Editors API
    • Editor API
    • Events API
    • Selection API
    • Toolbars API
    • Toolbar API
    • Translator API
• Credits

  ---

Getting started

Browser support

Modern browser only.

Documentation

Basic Usage

1. Include JS/CSS

2. Register

Thats all.

You may get the HTML code

Example using the editors:

Example using events:

Custom Editor

You may create a custom editor:

1. Create

2. Replace default editor with custom editor

Available Plugins

Basic Plugins

Basic Plugin

The plugin provides the following toolbars:

Html Plugin

The plugin provides the following toolbars:

Clear Plugin

The plugin provides the following toolbars:

Links Plugin

The plugin provides the following toolbars:

Customize link classes

Table Plugin

The plugin provides the following toolbars:

Styles Plugin

The styles plugin adds/removes classe(s) to your selected text.

Toolbars:

The style will be your toolbar key:

Create Plugin

Check out the or file to see how a plugin is created.

Events

Global Events

You may use the available events for plugin creation e.g.

Editors Events

Editor Events

Example:

Toolbars Events

Example:

Toolbar Events

Example:

import events from 'core/events.js';

events.listen('toolbar.build', (data) => {
    // customize link toolbar
    if (toolbar.id === 'link') {
        data.items = [
            'back', 'link.visit', 'link.delete', 'link.insert', '_',
            'link.input', '_',
            'link.window', 'link.windowLabel', '_',
            //'link.class'
        ];
    }
});

Editor Events

Example:

import editors from './core/editors.js';

document.addEventListener('DOMContentLoaded', (e) => {
    // create
    editors.create(document.querySelector('#editor'), {
        events: {
            click: (event, editor) => {
                //
            }
        }
    });
});

API

Editors API

import editors from './core/editors.js';

init/register

// init the editors:
editors.init();

// you may auto register editors with the data-editor attribute:
editors.register();

create

Creating a new editor.

const editor = editors.create(document.querySelector('#editor'));

// with config:
const editor = editors.create(document.querySelector('#editor'), {
    id: 'foo',
    toolbar: ['p', 'bold', 'headings'],
    events: {
        click: (event, editor) => {
            //
        }
    }
});

has / get / all

if (editors.has('ID')) {
    const editor = editors.get('ID');
}

const allEditors = editors.all();

plugin / plugins

editors.plugin({
    name: 'foo',
    init: () => {
        //
    },
    events: {
        //
    }
});

editors.plugins([{name: 'foo'}, {name: 'bar'}]);

Editor API

import editors from './core/editors.js';

const editor = editors.create(document.querySelector('#editor'));

code

Get the HTML code.

const htmlCode = editor.code();

config

Get config value with dot notation.

const value = editor.config('foo.bar', 'default');

Misc

const id = editor.id;
const el = editor.el; // editable area
const selection = editor.selection;
const toolbar = editor.toolbar;
const events = editor.events;

• selection check out the Selection API for more information.
• toolbar check out the Toolbar API for more information.
• events check out the Events API for more information.

Events API

import events from './core/events.js';

listen / fire

// with array params:
events.listen('click', (foo, bar) => {});
events.fire('click', ['foo', 'bar']);

// or with object params:
events.listen('click', (obj) => {});
events.fire('click', {});

register

const listeners = {
    "eventName": () => {

    },
};

events.register(listeners);

Selection API

import editors from './core/editors.js';

const editor = editors.create(document.querySelector('#editor'));
const selection = editor.selection;

get

Get the selected data:

const sel = selection.get();

const text = sel.text;
const element = sel.element;
const tagName = sel.tagName;

getTagnames

Get the selected tag names:

const tagnames = selection.getTagnames();

Misc

// Saves the current selection with unwrapping a HTML <span> marker.
selection.save();

// Saves the current selection without unwrapping a HTML <span> marker.
selection.save(false);

// Set saved selection by element.
selection.setSaved(element, '');

// Get the saved selection.
const sel = selection.getSaved();

// Clears the selection. Removes the marker if any.
selection.clear();

// Replaces the selection marker with the node.
selection.replace(node);

// Replaces the sel with the node.
selection.insertReplace(sel, node);

// Inserts the node after the sel.
selection.insertAfter(sel, node);

Toolbars API

import toolbars from './core/toolbars.js';

addItem

Add an item to be later used to build a toolbar.

Example Button:

toolbars.addItem({
    // required:
    key: "Foo", // a unique key
    text: "Foo",
    command: ["formatblock", "<h2>"],
    undo: ["formatblock", "<p>"], // or null
    tagname: "h2", // used for setting button active
});

Example Input:

toolbars.addItem({
    // required:
    key: "email", // a unique key
    // optional:
    element: "input", // HTML element, default "button"
    type: "email",
    id: "foo",
    for: "id",
    name: "foo",
    title: "Type your email",
    placeholder: "Type...",
    classes: ["foo", "bar"],
    // options: {"name": "value"}, // for selection element.
    attributes: {"name": "value"}, // any additonal HTML element attributes
    build_default: false, // if to build on default
    click: (event, item, toolbar, editor) => {
        // do something on click
    },
    keyup: (event, item, toolbar, editor) => {
        // do something on keyup
    }
});

Misc

const toolbar = toolbars.create({id: 'ID'});

if (toolbars.has('ID')) {
    const toolbar = toolbars.get('ID');
}

// opens the toolbar if exists:
toolbars.open('ID');

// closes all toolbars:
toolbars.close();

// closes all toolbars except those specified:
toolbars.close(["links"]);

Toolbar API

import toolbars from './core/toolbars.js';

build

Build toolbar with the specified items.

const toolbar = toolbars.create({id: 'ID'});

toolbar.build([
    'back', 'table.delete', '_',
    'table.row.below', 'table.row.above', 'table.row.delete', '_',
    'table.col.left', 'table.col.right', 'table.col.delete'
]);

open / close

const toolbar = toolbars.get({id: 'ID'});

toolbar.open();
toolbar.close();

Items

const toolbar = toolbars.get({id: 'ID'});

if (toolbar.has('key')) {
    const item = toolbar.get('key');
}

toolbar.disable('key');
toolbar.disable('key', false); // without hiding
toolbar.disableExcept(['key']);
toolbar.disableExcept(['key'], false); // without hiding
toolbar.enable('key');

toolbar.setActive(['key']);
toolbar.setActive(['a', 'p'], 'tagname'); // based on item tagname
toolbar.setActive(['key', 'key', false]); // without setting others inactive
toolbar.setActiveItem('key'); // set only active.

toolbar.positioning(); // position to selection;
toolbar.positioning(event); // position to event.pageX and event.pageY
toolbar.positioning(null, 100, 200); // position to x: 100, y: 200
toolbar.positioning(null, null, null, true); // position to last position

Translator API

import translator from './core/translator.js';

translator.locale('de-CH'); // current locale
translator.localeFallbacks({"de-CH": "en"});

// add translation for the specified locale.
translator.add('de-CH', {
    "Table": "Tabelle"
});

const translated = translator.trans('Table');

Credits

• Tobias Strub
• All Contributors