Question

I am trying to avoid hard-coding each instance of this WYSIWYG editor so I am using jQuery to create an each() loop based on function name. Annoyingly InnovaStudio seems to explode when I try.

Documentation

Attempt #1

<script type="text/javascript">

            /*
            id = $(this).attr('id');
            if(id.length == 0)
            {
                id = 'wysiwyg-' + wysiwyg_count;
                 $(this).attr('id', id);
            }

            WYSIWYG[wysiwyg_count] = new InnovaEditor('WYSIWYG[' + wysiwyg_count + ']');
            WYSIWYG[wysiwyg_count].REPLACE(id);
            */

            var demo = new InnovaEditor('demo');
            demo.REPLACE('wysiwyg-1');

            console.log('loop');

 </script>

Effect

Works fine, but of course only works for a single instance of the editor. If I want multiple instances I need to use an each.

Attempt #2:

<script type="text/javascript">

var wysiwyg_count = 1;
//var WYSIWYG = [];
var demo;

(function($) {
    $(function() {

        $('.wysiwyg-simple').each(function(){

            /*
            id = $(this).attr('id');
            if(id.length == 0)
            {
                id = 'wysiwyg-' + wysiwyg_count;
                 $(this).attr('id', id);
            }

            WYSIWYG[wysiwyg_count] = new InnovaEditor('WYSIWYG[' + wysiwyg_count + ']');
            WYSIWYG[wysiwyg_count].REPLACE(id);
            */

            demo = new InnovaEditor('demo');
            demo.REPLACE('wysiwyg-1');

            console.log('loop');
        });

    });
})(jQuery);
 </script>

Effect

Replaces the entire HTML body of my page with JUST WYSIWYG related code and complains as no JS is available (not even Firebug, so can’t debug).

Notice that I am hardcoding the name still. I only have one instance on the page I am testing it on, so when I get this hard-coded name working I will get the commented out code working along the same lines.

---

Does anybody know what the hell is going on here?

Answer 1

Why don’t you use their own initialization code since version 4.3:

    <textarea class="innovaeditor">
content here...
</textarea>


<script>
oUtil.initializeEditor("innovaeditor", 
{width:"700px", height:"450px"}
);
</script>

The method is oUtil.initializeEditor(selector, option). The first parameter is selector and second is editor properties in JSON format.

The selector can be:

Css class name, if class name is specified all textareas with specified class name will be replaced with editor.
Textarea Id. If it is an Id, a prefix ‘#’ must be added, for example oUtil.initializeEditor(“#mytextarea”).
Textarea object.
The second parameter is editor’s properties. All valid editor’s properties can be specified here for example width, height, cmdAssetManager, toolbarMode, etc.

Note that this method can be called from page onload or document ready event or during page load (as long as the object referred by selector are already rendered). This method available automatically when the page include the editor script.