5

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?
   }
);
Cœur
  • 37,241
  • 25
  • 195
  • 267
Dalen
  • 8,856
  • 4
  • 47
  • 52
  • You can either look at the docs of that editor or retrieive it from *rendered* output of it by inspecting through console. – Sarfraz Jun 11 '12 at 19:09

2 Answers2

11

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

(@dalen mentioned this in the comment above)

p3drosola
  • 5,784
  • 2
  • 23
  • 30
5

Here is how (using jQuery here):

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

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

FYI:

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 :)

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
  • I've actually looked for that method on the docs but couldn't find it. Thank you very much! – Dalen Jun 11 '12 at 19:25
  • @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. – Sarfraz Jun 11 '12 at 19:29
  • 3
    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 – Dalen Jun 11 '12 at 19:44