NicEdit - Unbind Events

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);
    });
            
});

I don't understand, you are trying to unbind something from something else? Can you add some clarity to what you are trying to achieve? — JDandChips, Oct 10 '12 at 08:41
Sure! I have multiple textareas. I activate editor clicking on textarea and disactivate editor on blur (nicEdit blur). When I remove current instance, clicking outside the editor (nicEdit blur), The blur event is still binded somewhere, checked on console logs. Clicking on another textarea, I build another editor and attach another blur event. I don't understand how component works or there's something dirty on removing instance? — Davide, Oct 10 '12 at 15:32
Right, so it sounds like the problem is that you are trying to create a new editor panel every time you select a textbox? Have you tried just using one editor panel? You could `hide` it on unbind and `show` on click, then all you have to do is re-`position` it against the clicked instance of your editor. This is normally how I do it, as nicEditor works quite well with one editor panel instance. I can write an example if you think this would solve your issue.. — JDandChips, Oct 11 '12 at 08:15
Recicles the same editor instance sounds good, but don't you think it's a little bit complicated? How can I re-position it around the page? Thanks for your quick reply! — Davide, Oct 18 '12 at 13:30

score 0 · Accepted Answer · answered Oct 19 '12 at 07:47

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.

In my scenario, this approach makes user experience more clear than have multiple instances.. I have to understand how to trigger a custom event on save click, to update content.. Thank's a lot! — Davide, Oct 19 '12 at 11:12

NicEdit - Unbind Events

1 Answers1