After enable() the color remains disabled.

[ditikos]

I have used the following code:

<form class="horizontal-form" id="message-form">
                <div class="pull-right control-group">
                    <div class="btn-group">
                        <button class="btn"><?php echo __('Message Actions', 'vakirtzis'); ?></button>
                        <button class="btn dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu message-actions">
                            <li><a href="#" data-action="reply">Reply</a></li>
                            <li><a href="#" data-action="delete">Delete</a></li>
                            <li><a href="#" data-action="star">Mark as starred</a></li>
                            <li class="divider"></li>
                            <li><a href="#" data-action="spam">Mark as spam</a></li>
                        </ul>
                    </div>
                </div>
<div class="control-group">
<textarea id="reply" name="replytext" disabled="disabled" class="span12" rows="10"></textarea>
</div>
</form>
[...]
<script>
jQuery(function($) {
        var $editor = $('#reply').wysihtml5({
            "image": false,
            useLineBreaks: true,
            placeholder: "<?php echo __('Press Reply from the actions to reply to this mail','vakirtzis'); ?>"
        });

        $("#messageForm").on("click",".message-actions li a",function(ev) {
           ev.preventDefault();
           action = $(this).data("action");
           myEditor = $("#reply").data("wysihtml5").editor;
           switch(action) {
               case "reply":                                      
                   myEditor.composer.enable();
                   $("#reply").removeAttribute("disabled");                   
                   $("#reply").focus();
               break;
           }
        });

        function enforceInactiveStates() {
            var disabled = this.textareaElement.disabled;
            var readonly = !!this.textareaElement.getAttribute('readonly');

            if (readonly) {
                this.composer.element.setAttribute('contenteditable', false);
                this.toolbar.commandsDisabled = true;
            }

            if (disabled) {
                this.composer.disable();
                this.toolbar.commandsDisabled = true;
            }
        }
        $editor.on( 'load', enforceInactiveStates );  
</script>

When myEditor object returns from disabled state, it still retains the background-color of disabled/readonly when clicked. (which for bootstrap is #eee )

[slamarca]

Hi, for anyone stumbling upon this issue I managed to find that the plugin copies the styles from the element pointed to by editor.composer.focusStylesHost every time the composer gets the focus (and does the same on blurring with editor.composer.blurStylesHost). So, if when the plugin gets initialized the textarea is disabled the composer iframe will always get the 'disabled' appearance on focus. You could workaround this issue tinkering at the right moment with the styles of the element pointed by editor.composer.focusStylesHost.