using contenteditable with wysiwyg in meteor

Question

I'm trying to use redactor.js to edit in place some divs in meteor; in the template I have:

<template name="home">
    <section class="editable">
    </section>
    ...
</template>

and in the js:

Template.home.events({
    "click section.editable": function(event) {
        $(event.target).redactor();
    },
});

this creates the redactor wysiwyg editor correctly when I click on the section; the problem is that by clicking again, another editor (nested inside the previous one is created); I'm trying without success to limit the execution of redactor() method only if the editor is not there already.

Answer 1

Could you wrap the state in a session variable? Of course, you'd need to set it back again once the redactor was finished (maybe try hooking into a blur event?)

Template.home.events({
    "click section.editable": function(event) {
        var isEditorActive = Session.get("editorActive", false);
        if (!isEditorActive) {
            Session.set("editorActive",true);
            $(event.target).redactor({
                blurCallback: function(e)
                {
                    Session.set("editorActive",false);
                    this.core.destroy(); // destroy redactor ?
                }
            });
        }
    }
});

PREVIOUSLY:

Is there a particular reason you want to use meteor events for this? You could just use redactor.

if (Meteor.isClient) {
    Meteor.startup(function() {
        $('section.editable').redactor({
            focus: false
        });
    });
}