editore.js

A magnific javascript editor! Create, validate and get data from fields easily without ever have to handle contenteditable yourself. 🎱

install

Available on npm and bower, or through direct download.

npm install editore

bower install editore

basic usage

Load editore.js into your application, then create the editor wrapper element with some fields inside:

<div id="editor">
  <h1 data-field="title" data-placeholder="Title" data-require="true" data-length="60">Example title</h1>
  <h3>Article</h3>
  <article data-field="articleBody" data-placeholder="Write here..." data-type="rich" data-require="true">
    <p>Lorem lorem lorem!</p>
  </article>
</div>

Now instantiate a new Editore:

var editore = new Editore(document.getElementById('editor'));

var values = editore.values();

/* 
  values will be something like this:

  {
   title: {
     name: 'title',
     length: 13,
     value: 'Example title',
     valid: false
   },
   articleBody: {
     name: 'articleBody',
     length: 18,
     value: '<p>Lorem lorem lorem!</p>',
     valid: true
   }
  }
 */

---

constructor

new Editor(element);

parameters

• element: is the element from where the editor should get its child elements to transform in fields according with their data-attributes. Child elements that don't have the required data-attributes will not be converted into editor fields.

field element

  <h1 data-field="title" data-placeholder="Title" data-require="true" data-length="60">
    Lorem title!
  </h1>

data attributes

• data-field: String (required)
• data-placeholder: String (required)
• data-required: Boolean
  • toggle class: required
• data-length: Number
  • toggle class: invalid
• data-type: String
  • simple (default): It's a single-line field, without any text manipulation
  • rich: It's a multi-line field, with text manipulation support

methods

• editore.values()
• editore.fields()
• editore.clearFields()
• editore.setFieldsValues( fields )
• editore.destroy()
• editore.subscribeInput( callback )
• editore.triggerInput( data )
• editore.hideComponents()
• editore.registerEditionPlugin( Plugin, pluginOptions )
• editore.registerInsertionPlugin( Plugin, pluginOptions )

editore.values()

• return a object with all fields values.

editore.values();
/*
return {
  fieldName: {
    name: String,
    length: Number,
    value: String,
    valid: Boolean
  }
}
*/

editore.fields()

• return a object with all fields internal attributes.

editore.clearFields();
/*
return {
  fieldName: {
    element: DOMElement,
    maxLength: Number,
    name: String,
    placeholder: String,
    required: Boolean,
    type: String
  }
}
*/

editore.clearFields()

• clear all fields values.

editore.clearFields();

editore.setFieldsValues( fields )

• parameters
  • fields: Object

editore.setFieldsValues({
  fieldName: 'Value',
  richFieldName: '<p>Value</p>'
});

editore.destroy()

• unset editable and remove all fields listeners.

editore.destroy();

editore.subscribeInput( callback )

• parameters
  • callback: Function(currentField)

editore.subscribeInput(function(currentField) {
  console.log('Current: ', currentField);
});

editore.triggerInput( data )

• parameters
  • data: Object|String|Number (optional)

editore.triggerInput();

editore.hideComponents()

• hide insertion and edition components.

editore.hideComponents();

editore.registerEditionPlugin( Plugin, pluginOptions )

• register a new plugin on selection edition component.
• parameters
  • Plugin: Plugin Constructor
  • pluginOptions: Object

editore.registerEditionPlugin(EditionPlugin, pluginOptions);

editore.registerInsertionPlugin( Plugin, pluginOptions )

• register a new plugin on insertion component, which is located between the current block and the next block.
• parameters
  • Plugin: Plugin Constructor
  • pluginOptions: Object

editore.registerInsertionPlugin(InsertionPlugin, pluginOptions);

Plugins avaliable

Pretty soon we'll have more 🙏

• Bold Edition Plugin
• Italic Edition Plugin
• Link Edition Plugin
• Embed Insertion Plugin
• Image Insertion Plugin

Plugin constructor

• insertion type: A component called on rich fields selection to edit the selection data.
• edition type: A component called on rich fields between the current edit block and the next block, in order to insert new content into the field.

method

• context instance objects
  • this.name: String (required)
    • Editore uses this name to register and manage the plugin, also uses to define the class of the plugin button
  • this.button: DOMElement (required)
    • Editore get this button and insert into selection component
  • this.tag: String (required if is a edition plugin)
    • Editore uses this tag to check if the edition plugin is active with current selection element
• injected methods
  • this.triggerInput(): Editore inject in the plugin instance context it's input trigger method, input events can be listened by editore.subscribeInput( callback ) method.
• injected objects
  • this.component: Editore adds in the plugin instance context it's component object, enabling access to it's element, plugins and checkPluginsState method.
    • element: DOMElement
    • plugins: Array
    • checkPluginsState: Function

function Plugin() {
  this.name = 'PluginName';
  this.button = document.createElement('button');
  this.button.innerText = 'Edition';
  // if is a edition component
  this.tag = 'i'
  // show component objects
  console.log(this.component)
}

prototype

• action: Function(currentSelectionField, clickEvent) (required)
  • method called when plugin button is clicked
• destroy: Function() (required)
  • method called before destroy Editore

Plugin.prototype = {
  action: function(currentSelectionField, clickEvent) {
    e.preventDefault();
    // do what you have to do
    // trigger editor input
    this.triggerInput();
  },

  destroy: function() {
    // destroy the plugin
  }
};

---

support

• chrome: ?
• firefox: ?
• safari: ?
• internet explore: ?

---

contribute

Everyone can contribute! Finding bugs, creating issues, improving documentation, improving editor it self or creating components. Every contribution will be welcomed! 🎅

Fork it -> Branch it -> Test it -> Push it -> Pull Request it 💎

Currently development is being maintained by Núcleo Digital Grupo RBS.