Insert HTML programmatically in wysiHTML5 editor

Question

I found javascript wysiwyg editor wysiHTML5.

I'm trying to add element <a href=...> to the editor or just turn on bold programmatically.

My code is:

var editor = new wysihtml5.Editor("textarea", {
    toolbar:      "toolbar",
    stylesheets:  "css/wysihtml5.css",
    parserRules:  wysihtml5ParserRules
});

editor.observe("load", function() {
    editor.composer.commands.exec("bold");
});

Am I doing something wrong?

mateusmaso · Accepted Answer · 2017-02-18T00:49:31.310

15

Actually no, but you have to be sure that your textarea (iframe) is focused. Try to use on instead of observe. Here is a sample code that worked for me with insertHTML.

editor.on("load", function() {
  editor.focus();
  editor.composer.commands.exec("insertHTML","<a href=....>text</a>");
});

edited Feb 18 '17 at 00:49

answered May 27 '12 at 01:08

mateusmaso

7,843
6
41
54

Thanks! I spent a couple of hours trying to figure this out, it should really be in the docs – Josh Crowder Jul 16 '13 at 10:53
1

If you don't mind erasing the html in the editor you can use the setValue command i.e editor.setValue(""); – Chris O'Sullivan Jul 22 '13 at 11:02
Please note your colon at the end of the script. Should it be a semicolon? – Diego Sagrera Jul 25 '14 at 23:33
Added semicolon, I was in too hurry to read comment and spent half hour to notice that – Ravikumar Sharma May 15 '15 at 10:52
This worked very well for me. But how do I blur/unfocus the editor after the "insertHTML" insertion? I have tried a few things, amongst other `editor.blur()` but nothing seems to work. – Cjoerg Jul 30 '15 at 19:02

score 8 · Answer 2 · answered Dec 13 '12 at 21:16

mateusmaso's solution gave me the following error:

NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLDocument.execCommand]
[Break On This Error]   

Object.defineProperty(object, property, config);

So I've investigated some more and found the following solution, which (IMO) seems more ok:


var value = 'whatever you want to set';
// The jQuery reference to the textarea
var $ta = $('textarea#your-selector');
// The reference to the wysihtml5 editor - everything is contained within it 
var w5ref = $ta.data('wysihtml5');
// Check if you have it
if(w5ref){
   // if yes it's really an enhanced / wysihtml5ed textarea 
   // and use its setter
   w5ref.editor.setValue(value);
} else {
   // otherwise just simply populate the textarea as you normally would
   $ta.html(value);
}

Source

score 2 · Answer 3 · edited Oct 13 '16 at 17:50

2

assuming you have instantiated the editor previously using $('#textarea-id').wysihtml5()

$('#textarea-id').data("wysihtml5").editor.setValue('new content');

font

edited Oct 13 '16 at 17:50

Hafenkranich

1,696
18
32

answered Oct 13 '16 at 17:00

Rodrigo R Novaes

21
1

Thanks for this elegant solution – elsurudo Mar 14 '17 at 10:15

Insert HTML programmatically in wysiHTML5 editor

3 Answers3

Linked