Load HTML content into Aloha editor

Question

I am using the Aloha editor on my website. I have been able to use it successfully and users can create HTML and save it to my database. However I am having problems in pre-loading HTML content into the editor so that users can edit existing HTML.

Here is the Javascript that initialises the editor:

<script type="text/javascript">
Aloha.ready(function () {
    Aloha.jQuery('#richTextEditor').aloha();
    Aloha.bind('aloha-smart-content-changed', function (event, editable) {
        $(".hiddenTextArea").val(Aloha.getActiveEditable().getContents());
        $("#btnSave").click();
    });
    var obj = "";
    Aloha.activeEditable().setContents($(".hiddenTextArea").val(), obj);
});
</script>

I have tried to use Aloha.activeEditable().setContents() as I saw this mentioned on another site but I get an error in my browsers saying

Error: TypeError: Aloha.activeEditable is not a function

Answer 1

Aloha!

It's

/**
 * Set the contents of this editable as a HTML string
 * @param content as html
 * @param return as object or html string
 * @return contents of the editable
*/
Aloha.activeEditable.setContents('your html string', true);

not

Aloha.activeEditable().setContents();

Have you seen this example: http://aloha-editor.org/howto-store-data-with-aloha-editor-ajax.php

You don't need to write the content to a textarea. You could also submit it directly via AJAX or just .aloha() the textarea directly if you need the content with other values in a form (attention when using a textarea: if the html id of the textarea is "xy" then the id for the editable within Aloha Editor will be "xy-aloha")

Do you really want the send the form on each 'aloha-smart-content-changed' event? Maybe use 'aloha-editable-deactivated'? 'aloha-smart-content-changed' will not be fired when eg something is formatted bold...