Programmatically retrieve content from WYSIHTML5 editor

Question

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 on blur event

editor.on
(
   "blur",
   function()
   {
      //what here?
   }
);

Parisi

You can either look at the docs of that editor or retrieive it from rendered output of it by inspecting through console. – Charisecharisma

Answer 1

It's much better to use the API editor.getValue()

(@dalen mentioned this in the comment above)

Swahili

Answer 2

Here is how (using jQuery here):

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

To find text instead, use text() instead of html().

FYI:

• I jQuerified this demo page of it using jQueryify bookmarklet
• Entered some text in editor
• typed above code at console and output was entered text

In your application, you won't need the jQueryify bookmarklet, I used it to inject jQuery on that demo page so that I could use it to get the value of editor.

---

Having said that, there normally should be some built-in method in that editor to get current value you should look at the docs :)

Charisecharisma

I've actually looked for that method on the docs but couldn't find it. Thank you very much! – Parisi

@Dalen: You are welcome. Try at console console.log(editor) just after you create the instance of editor (new wysihtml5.Editor) . It would list all members of it. – Charisecharisma

As you suggested printing editor into console, turns out that it has a method called getValue that does what I was looking for. Thanks again – Parisi