Add text to Froala text editor

Question

I'm trying to programatically input html into Froala text editor. Based on their documentation this should work:

$(function(){
    $('#editor').editable("setHTML", "<p>My custom paragraph.</p>", false);
});

But when I reload page I only get empty space, no errors. This is binded to textarea with id #editor. If I use this code:

$(function(){
    $('#editor').editable({inlineMode : false});
});

... then everything is ok.

Does anyone knows how to programatically input html into this editor.

Annual

Answer 1

You should try this :

$('#editor').froalaEditor('html.set', 'My custom paragraph.');

See the detail about froala method at this reference: https://www.froala.com/wysiwyg-editor/docs/methods#html.set

Tenorio

Hello, I have done this. On edit, the form, when I submit the form then this field didn't post data. what will do to post this field? Thank you – Zr

This worked for me. Like... var notification_html = $(this).data('html'); $("textarea#feditor").froalaEditor('html.set', notification_html); – Sidekick

What was the final approach? – Booker

Answer 2

For the users you are looking for v3 answers, You can add text in v3 by:

var editor = new FroalaEditor('.selector', {}, function () {
  // Call the method inside the initialized event.
  editor.html.insert('<p>My custom paragraph.</p>');
})

Also for if you want to replace the whole content then you can use set method

var editor = new FroalaEditor('.selector', {}, function () {
  // Call the method inside the initialized event.
  editor.html.set('<p>My custom paragraph.</p>');
})

Byssus

Answer 3

Use both. First you have to create the editor, then you can set the HTML

$(function(){
    $('#editor').editable({inlineMode : false});
    $('#editor').editable("setHTML", "<p>My custom paragraph.</p>", false);
});

Leekgreen

Answer 4

With the latest version of Froala this works fine

$("#froalaEditor")[0]["data-froala.editor"].html.set('This should work fine');

Unleavened

Answer 5

To append a text use html.insert

$("#editor").froalaEditor('html.insert','<p>new text to append</p>');

Quorum

Answer 6

After inserting the HTML use "Sync"

$("#editor").editable("insertHTML", "123456", true);
$("#editor").editable("sync");

Exploratory

Answer 7

Just for note. in HTML

<div id="froala-editor">
  <p>something</p>
</div>

and in javascript

  $(function() {
    $('div#froala-editor').froalaEditor({
      pastePlain: true
    })
  });

Studbook

Answer 8

Try this:

$('#editor').froalaEditor('html.set', 'My custom paragraph.');
$('#editor').froalaEditor('undo.saveStep', 'My custom paragraph.');

Reference: https://github.com/froala/wysiwyg-editor/issues/1578

Booker

Answer 9

If you are using it with React js, here is how i did it... FroalaEditorComponent has an event object in it which has initialized as an event. here is the code example:

initialized: function () {
               this.html.set(formik?.values?.body); // not working for me
               this.html.set(`<h1>Hello!</h1>`); // working fine
               console.log(this);
            },

Bandit