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.

score 15 · Answer 1 · edited Jan 30 '16 at 07:16

15

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

edited Jan 30 '16 at 07:16

ρяσѕρєя K

132,198
53
198
213

answered Jan 30 '16 at 07:08

muhammad assegaf

159
1
2

1

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 – Hamaad Hussain Dec 22 '17 at 12:24
This worked for me. Like... var notification_html = $(this).data('html'); $("textarea#feditor").froalaEditor('html.set', notification_html); – PJunior Mar 29 '18 at 09:02
What was the final approach? – Naik Ashwini Aug 28 '19 at 13:09

score 5 · Answer 2 · answered Jun 03 '19 at 23:36

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>');
})

score 2 · Answer 3 · answered Aug 25 '14 at 12:41

2

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);
});

answered Aug 25 '14 at 12:41

Hans Roerdinkholder

3,000
1
20
30

score 2 · Answer 4 · answered Jun 03 '20 at 02:00

2

With the latest version of Froala this works fine

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

answered Jun 03 '20 at 02:00

Gvs Akhil

2,165
2
16
33

score 1 · Answer 5 · answered Jun 26 '20 at 15:26

1

To append a text use html.insert

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

answered Jun 26 '20 at 15:26

Savrige

3,352
3
32
38

score 0 · Answer 6 · answered Jul 28 '14 at 10:01

0

After inserting the HTML use "Sync"

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

answered Jul 28 '14 at 10:01

RailsEnthusiast

1,251
2
12
18

score 0 · Answer 7 · answered Nov 04 '18 at 16:22

0

Just for note. in HTML

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

and in javascript

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

answered Nov 04 '18 at 16:22

Linh Đào Ngọc

1

score 0 · Answer 8 · answered Aug 29 '19 at 04:43

0

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

answered Aug 29 '19 at 04:43

Naik Ashwini

750
12
32

score 0 · Answer 9 · answered May 16 '22 at 10:34

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);
            },

Add text to Froala text editor

9 Answers9