getting value of several textarea from WYMeditor

Question

I would like getting the value of two textarea from WYMeditor:

The first one:

<script type="text/javascript">
 jQuery(function() {
    $(" .wymeditor").wymeditor({
     logoHtml: '',
     lang: 'fr',
     skin: 'default',
    });
 });
</script>

And the second one:

<script type="text/javascript">
 jQuery(function() {
  $(" .wymeditor_ref").wymeditor({
     logoHtml: '',
     lang: 'fr',
     skin: 'silver',
  });
 });
</script>

HTML:

<textarea id="definition" class="wymeditor" name="definition"/></textarea>
<textarea id="references_definitions" class="wymeditor_ref" name="definition"/></textarea>

I'm using this: WYMeditor.INSTANCES[0].html();

But, the problem is I don't know how to do if there are two textarea. How getting the second value?

Thanks a lot!!

Answer 1

Get specific WYMeditor instance HTML with known ordering

If you simply want to iterate through the results of all the WYMeditor instances on a particular page, your array index method is just fine. If you know the order in which the WYMeditor instances are created, you'll do something like:

var wymResults,
    wymRefResults;

wymResults = WYMeditor.INSTANCES[0].xhtml();
wymRefResults = WYMeditor.INSTANCES[1].xhtml();

Get HTML from all WYMeditor instances

If you have an unknown number of instances of WYMeditor, this is how you might get the results of all of them:

var results = [],
    i;
for (i = 0; i < WYMeditor.INSTANCES.length; i++) {
    // Do something with the xhtml results
    results.push(WYMeditorINSTANCES[i].xhtml());
}

Get specific HTML results with unknown instantiation order

If it matters which WYMeditor instance you'd like to retrieve though, which is often the case, you'll want to store references to the specific instances when you create them. eg.

var wym,
    wymRef,
    wymResults,
    wymRefResults;

// Instantiate my WYMeditor instances
wym = $(".wymeditor").wymeditor();
wymRef = $(".wymeditor_ref").wymeditor();

// Let's grab the results. This will probably live in some kind of `submit()` handler.
wymResults = wym.xhtml();
wymRefResults = wymRef.xhtml();

Use xhtml(), not html()

Another note specific to your example, but you should be using the xhtml() call instead of the html() call to ensure consistent, cross-browser markup.

The html() call doesn't run the resulting HTML through the parser or do any browser-specific cleanup, which means that if you were to load some html in lets say IE9 that was created in Chrome, just calling html() without making any changes will mean the resulting HTML will be slightly different. Different browsers need HTML that is slightly different to provide a consistent editing experience, and WYMeditor abstracts this away for you, assuming you use xhtml() to get the results.