-
Notifications
You must be signed in to change notification settings - Fork 13
Getting Started
Leo Balter edited this page Mar 2, 2015
·
8 revisions
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).
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..."
});
-
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
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
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 - ...
====
-
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
-
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 - ...
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