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
RedactorX('#entry');
To set content in Redactor X, you can also use the content
setting instead of specifying html code inside textarea
.
// element
<textarea id="entry"></textarea>
// call editor
RedactorX('#entry', {
content: '...your html code..'
});
See example with demo of content in setting.
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 = RedactorX('#entry');
// 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.
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>
RedactorX('#entry');
</script>
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>
RedactorX('#entry');
</script>
<!-- send data using jQuery -->
<script>
function sendForm() {
$.ajax({
url: '/savedata-server-script/',
type: 'post',
data: $('#myform').serialize()
});
}
</script>
Content can get programmatically using the API method editor.getContent
.
// call editor
var app = RedactorX('#entry');
// 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.
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 = RedactorX('#entry');
// 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.
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.
RedactorX('#entry', {
autosave: {
url: '/savedata-server-script/'
}
});
See a detailed description of autosave in the settings.