Set & get 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.

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

// call editor
ArticleEditor('#entry', {
    css: '/your-article-dist-path/'
});

Content in setting

To set content in Article, you can also use the content setting instead of specifying html code inside textarea.

// element
<textarea id="entry"></textarea>

// call editor
ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    content: '...your html code..'
});

See example with demo of content in setting.

API method

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

// call editor
var app = ArticleEditor('#entry', {
    css: '/your-article-dist-path/'
});

// set content from outside scripts
app.editor.setContent({ html: '<p>Hello world!</p>' });

// set content in the plugin method
this.app.editor.setContent({ html: '<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', {
    css: '/your-article-dist-path/'
});
</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', {
    css: '/your-article-dist-path/'
});
</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.getContent.

// call editor
var app = ArticleEditor('#entry', {
    css: '/your-article-dist-path/'
});

// get content from outside scripts
var content = app.editor.getContent();

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

See more how the API works.

Insert content

The API method editor.insertContent 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.

// cal editor
var app = ArticleEditor('#entry', {
    css: '/your-article-dist-path/'
});

// insert content from outside scripts
app.editor.insertContent({ html: '<p>Hello world!</p>' });

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

See more how the API works.

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', {
    css: '/your-article-dist-path/',
    autosave: {
        url: '/savedata-server-script/'
    }
});

See a detailed description of autosave in the settings.