Question

I’m searching for a (simple ?) way to temporary disable my MooEditable block.

Using a reset.css, which put down some basic inline tag like <strong>, I would like to keep the MooEditable iframe style, without any possibility to edit the content (like a <textarea disabled="disabled">.

Not sure to be enought clear.

Answer 1

Finally, I found a solution, looking in the deepest files of MooEditable.

For people who maybee want this solution : MooEditable accepts options, then here’s your calls :

$$('.mooeditable.enabled').mooEditable({enabled:true});
$$('.mooeditable.disabled').mooEditable({enabled:false});

You must modify a little bit of code, in the attach function :

attach: function(){
    var self = this;
    this.mode = 'iframe';
    this.editorDisabled = !this.options.enabled;
    ...
}

You can also (recommended) make the ui-toolbar hidden, adding a hidden class to :

MooEditable.UI.Toolbar= new Class({ 
    initialize: function(options){
        this.setOptions(options); 
        this.el = new Element('div', 
                              {'class': 'mooeditable-ui-toolbar ' + 
                                        (this.options.enabled ? '' : 'hidden') +
                                        this.options['class']
                              }); 
    } 
}

With of course the corresponding CSS :

.mooeditable-ui-toolbar.hidden {
    visibility: hidden;
}