Getting Started

With:

<div class="editor"></div>

and:

var arte = new Arte('.editor');

then it doesn't create a internal element, but morphs the given element:

<div class="editor arte-editor" contenteditable="true">
    <span class="arte-placeholder">Start something...</span>
</div>

If the element contains content instead of just whitespace, use it instead of the placeholder.

Example:

<div class="editor">
  <h1>Hello, World!</h1>
  <p>Lorem ipsum</p>
</div>

<!-- becomes -->

<div class="editor arte-editor" contenteditable="true">
  <h1>Hello, World!</h1>
  <p>Lorem ipsum</p>
</div>

• After the initialization, the cursor should be placed at the end of the content.
• If the placeholder element is present, it should be cleaned after inserting anything else
• If the content is empty, show the placeholder again (same given at the options or default).

Available options (with default options)

You can set custom options by passing an object with your options. Available options are listed at the Options page.

arte = new Arte('.editor', {
  placeholder: "Start something..."
});

---

Calling methods

Core methods

• arte.html(): Returns the html content of the current selection
• arte.text(): Returns the text content of the current selection
• arte.destroy(): Destroys the arte object and makes the element content non-editable

Events

All events are editor wide and doesn't relate to the element current selection.

• arte.on("event", callback);: set an event handler on the editor
• arte.off("event"[, callback]);: unset an event handler on the editor
• arte.trigger("event");: trigger an editor event

Specific events

You can find the following available events on ArteJS:

• arte.click();: trigger a click event
• arte.click( callback );: sets a click event handler
• arte.select();: trigger a click event
• arte.select( callback );: sets a select event handler
• ...

====

State methods

• arte.state(): returns an object with the current state of the object
• arte.state('property'): returns the value for the given state
• arte.state('property', value): sets a value for the given state
• arte.range(): returns an object with the current selection range

Specific state methods

• arte.bold: toggles bold style on the current selection
• arte.italic: toggles italic style on the current selection
• arte.underline: toggles underline style on the current selection
• arte.subscript: toggles subscript style on the current selection
• arte.superscript: toggles superscript style on the current selection
• arte.textAlign(): returns a text align style value for the current selection
• arte.textAlign( value ): sets a text align style value for the current selection
• arte.font(): returns the font family value for the current selection
• arte.font( value ): sets a font family value for the current selection
• arte.size(): returns a font size value for the current selection
• arte.size( value ): sets a font size value for the current selection
• arte.color(): returns a rgb color value for the current selection
• arte.color( value ): sets a valid CSS color value for the current selection
• arte.bgcolor(): returns a rgb background color value for the current selection
• arte.bgcolor( value ): sets a valid CSS color value for the current selection background
• ...

---

All content related methods

You can call methods related to the entire Arte content, regardless of the current selection using the all property.

arte.all.text(); // returns the text value of the entire content regardless of the selected text

Available methods

• arte.all.text
• arte.all.html
• ...

---