Question

I decided to use NicEdit on a project, because is lightweight.

So, now I have a variable number of instances in my page, loaded on click and removed on editor blur.

I need to know how to unbind events from this component. I tried to unbind it manually, but I didn’t understand where they are linked!

$('.container').bind('click', function(){
    var _form = $(this).parentsUntil('form').parent();
    var textarea = _form.find('textarea.edit');
    var ta_id = textarea.attr('id');
    var ed = new nicEditor(niceditOptions).panelInstance(ta_id);

    // Show Preview and update textarea and so on
    ed.addEvent('blur', function() {
        var _ed = nicEditors.findEditor(ta_id);
        var ev_type, evt, events = this.eventList;

        for (ev_type in events){
            for (evt in ev_type){
                if (this.removeEventListener){
                    this.removeEventListener(ev_type, events[ev_type][evt]);
                }
                else {
                    this.detachEvent('on' + ev_type, events[ev_type][evt]);
                }
            }
        }
        this.removeInstance(ta_id);
    });
            
});

Answer 1

There are potentially other ways of going about your solution, but in this scenario I prefer to use one version of a nicEditor panel and bind all of my WYSIWYG instances. The reason for this is that I think its slightly tidier. I will assume that you know how to bind one editor to multiple editable instances.

On load my HTML would probably look something like this:

<div id="instance1">text</div>
...
<div id="instance2">text</div>
...
<div id="myNicPanel" style="display:none;position:relative;"></div>

So, once the page has completed it’s load cycle, i should have two editable areas and a hidden editor. I would then use the following jQuery to reposition and show the editor when an instance is selected for editing:

        $('#instance1 , #instance2').click(function () {
         //Reposition the editor to just above the selected instance
            $('#myNicPanel').css({
                top: $(this).position().top,
                left: $(this).position().left,
                display: 'block',
                width: $(this).width() - 2 //manual adjustment,
                position: 'absolute'
            });
         //Make the width of the editor equal to that of the instance
            $('#myNicPanel').css({
                top: $(this).position().top - $('#myNicPanel').height()
            });
        });

You would of course already have initiated your editor and instances prior to this, and if you also want to have the editor hide again on blur, you could attach your hide() function to one of the nicEditor events.