Documentation

Content

Set content #

Initial content

The editor replaces a textarea element on the page, so HTML set for this element will be the editable content.

<textarea id="entry">
    <p>Content</p>
</textarea>

API method

Content can be set programmatically using the API method editor.content.set. This method completely replaces the content of the editor with the HTML specified in the argument.

// set from outside scripts
var app = ArticleEditor('#entry');
app.editor.content.set('<p>Hello world!</p>');

// set in the plugin method
this.app.editor.content.set('<p>Hello world!</p>');

See more how the API works.

Get content #

Sending form data using POST method

If the textarea element for which the editor is running is in a form, then you can send content along with the form.

<form action="/savedata-server-script/" method="post">
    <textarea id="entry" name="content"></textarea>
    <button>Send</button>
</form>

<!-- call -->
<script>
    ArticleEditor('#entry');
</script>

Form serialize and AJAX

You can send content as a POST request using AJAX, for example, with jQuery.

<!--form -->
<form action="" id="myform" method="post">

    <!-- element -->
    <textarea id="entry" name="content"></textarea>

    <!-- submit button -->
    <button onclick="sendForm();">Send</button>
</form>

<!-- call -->
<script>
    ArticleEditor('#entry');
</script>

<!-- send data using jQuery -->
<script>
function sendForm() {
    $.ajax({
        url: '/savedata-server-script/',
        type: 'post',
        data: $('#myform').serialize()
    });
}
</script>

API method

Content can get programmatically using the API method editor.content.get.

// get from outside scripts
var app = ArticleEditor('#entry');
var content = app.editor.content.get();

// get in the plugin method
var content = this.app.editor.content.get();

See more how the API works.

Insert content #

API method

The API method editor.content.insert adds the specified HTML to the cursor position if it is an editable block. If the block is not editable, such as Image, Embed, then the content will be added after the block.

// insert from outside scripts
var app = ArticleEditor('#entry');
app.editor.content.insert('<p>Hello world!</p>');

// insert in the plugin method
this.app.editor.content.insert('<p>Hello world!</p>');

See more how the API works.

Insertion service

The editor.content.insert method can receive an argument, as HTML only. If you need to add br, html char, or some node of element there is the Insertion service in the editor.

(function() {
    ArticleEditor.add('plugin', 'myplugin', {
        init: function() {
            // define service
            this.insertion = this.app.create('insertion');
        },
        mymethod: function() {
            // insert br tag at the caret
            var inserted = this.insertion.insertBreakline();

            // insert html char at the caret
            var inserted = this.insertion.insertChar('&nbsp;');

            // insert node at the caret
            var node = document.createElement('img');
            node.src = 'image-url';
            var inserted = this.insertion.insertNode(node);
        }
    });
})(ArticleEditor);

Autosave content #

The editor can send a save request for each change in the content.

To do this, specify the setting for the server-side script that will catch the saving of content.

ArticleEditor('#entry', {
    autosave: {
        url: '/savedata-server-script/'
    }
});

See a detailed description of autosave in the settings.