wysihtml5 - setting a value won't work, because 'sandbox iframe isn't loaded yet'

Question

I'm just working on a little webservice. Therefore I am using an AJAX call and append my data to a table on my website. Here I can read and update already existing entries or write new entries. Everything works fine.

I want to have the possibility to update already existing with the wysihtml5 editor. I already integrated this editor on my website and I can use it on new entries. That works, too.

But now there's the problem with existing data. When it comes to the form to update data, I want the existing data being displayed as the value. Everything works fine on all inputs, just the wysihtml5 don't work.

I already know that there's an iframe and that's why I can't set the value of the textarea. I searched for a solution and found the following code (last line):

var editor = new wysihtml5.Editor("textareaid", { // id of textarea element
        toolbar: "wysihtml5-toolbar", // id of toolbar element
        parserRules: wysihtml5ParserRules, // defined in parser rules set
});

editor.setValue('Here's the content', true);

Usually this should work, but no content appears and the console just tells me:

Error: wysihtml5.Sandbox: Sandbox iframe isn't loaded yet

I tried it with a timeout-function but nothing works. Searching on the internet it also seems that there is noone else with that problem. I hope you can help me out, would be great!

Is there a way to set the value?

one issue is the first `setValue` parameter is wrapped in single quotes, but has an apostrophe, which is the same as a single quote. Try `editor.setValue("Here's the content", true);` — stevenspiel, Jul 01 '15 at 18:57

score 8 · Answer 1 · answered Jun 21 '15 at 13:25

8

This code work for me

$("#product_details").data("wysihtml5").editor.getValue();// to get the value
$("#product_details").data("wysihtml5").editor.setValue('new content')// to set the value

answered Jun 21 '15 at 13:25

Tushar T.

345
2
7
13

I had another solution that worked for me but when I implemented this lightbox http://lokeshdhakar.com/projects/lightbox2/ it killed it. Tried this solution and now it all works great. – Cesar Bielich Mar 03 '17 at 23:24

score 5 · Answer 2 · answered Oct 04 '17 at 10:37

5

I got the solutions, below code worked for me

$('#id ~ iframe').contents().find('.wysihtml5-editor').html(my_html);

answered Oct 04 '17 at 10:37

Ricky

135
1
8

score 3 · Answer 3 · answered Jan 23 '18 at 14:40

3

This work for me

$('.wysihtml5-sandbox').contents().find('.wysihtml5-editor').html(my_html);

the ".wysihtml5-sandbox" is a class name of iframe, create by wysihtml5 by default.

answered Jan 23 '18 at 14:40

benk

31
1
3

So, thats a simple copy of an older answer with a slightly modified jQuery selector in the first step. Is there anything that makes your solution a better one as the existing? – Nico Haase Jan 23 '18 at 15:00
for beginner just want to copy this solutions. no need to find what is iframe ID. – benk Jan 24 '18 at 03:42
So, its even wrong understanding, because you are not using ID selectors in your answer – Nico Haase Jan 24 '18 at 08:09

score 1 · Accepted Answer · answered Dec 04 '13 at 06:19

1

I finally got it working by myself. I just change the second parameter of setValue to false. I don't know why, but it works then.

answered Dec 04 '13 at 06:19

Fabi

274
4
15

score 0 · Answer 5 · answered Oct 18 '15 at 17:04

0

this code worked for me :

 var wysihtml5Editor = $('#text_editor').data("wysihtml5").editor;
 wysihtml5Editor.setValue("<p>foobar</p>", true);
 console.log(wysihtml5Editor.getValue());

answered Oct 18 '15 at 17:04

Bruno Ribeiro

1,280
16
21

wysihtml5 - setting a value won't work, because 'sandbox iframe isn't loaded yet'

5 Answers5