Insert HTML programmatically in wysiHTML5 editor

javascript wysiwyg wysihtml5
daemon picture daemon · May 24, 2012 · Viewed 14.9k times · Source

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?

Answer

mateusmaso picture mateusmaso · May 27, 2012

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

Related questions

Programmatically retrieve content from WYSIHTML5 editor

How do I programmatically retrieve content from a WYSIHTML5 editor? Suppose the editor is instantiated as this: var editor = new wysihtml5.Editor ( $(this.el).find('textarea').get(0), { toolbar: "toolbar", parserRules: wysihtml5ParserRules } ); i would like to get the editor's content …

Read More
WYSIWYG GUI builder (IDE) for JQuery or other JavaScript framework?

Are there any IDE's that allow building of web pages / user interface using javascript frameworks such as JQuery in a WYSIWYG manner? For example, similar to how Dreamweaver allows you to build HTML pages or NetBeans allows you to graphically …

Read More
Get caret (cursor) position in contentEditable area containing HTML content

I have contentEditable element (can be p, div, ...) and I would like to get caret (cursor) position in it. I can normally achieve it with this piece of code: var position = window.getSelection().getRangeAt(0).startOffset; This works fine while the …

Read More