Tinymce code editor is readonly in JTable Grid

Question

I have JQuery jTable grid containing edit button on each row.

The FormEditor opens in modal and the tinymce appears correctly and work correctly with no problems except that when I open source code editor I find the textarea in read only mode, I need to make it editable.

I tried with several versions of tinymce.

What are the main causes for the textarea in source code editor to be read only, and how to fix that. ?

This is very hard to do, I'm using a lot of code in several places to make the jTable work. Server side code with client side. — user2903753, Apr 30 '16 at 08:47
Since i cant exactly picture out your issue I suggest you to call a function which will set read only property of the textarea false each time u click the text area I know its not a perfect thing to do but i guess it will help — Shalini, Apr 30 '16 at 08:50

score 1 · Accepted Answer · edited May 23 '17 at 12:16

jTable uses jqueryUI modal dialog, and that was the cause for the problem.

I found the closest answer to my question here: TinyMCE opened in jqueryUI modal dialog

$(document).on('focusin', function(e) {
if ($(event.target).closest(".mce-window").length) {
    e.stopImmediatePropagation();
}});

EDIT: This is another solution for jQuery UI >= 1.10.2:

Replacing _focusTabbable prototype method by a placebo function fixed it:

$.ui.dialog.prototype._focusTabbable = $.noop;

This solution found here: prevent jquery ui dialog from setting focus to first textbox

score 0 · Answer 2 · answered Apr 30 '16 at 15:38

I am guessing/assuming you are using Bootstrap for your modal (it would help others if you clarified what you are using to create your modal).

The Bootstrap modal has code that stops anything else from getting focus while it is enabled (by design). When the code view of TinyMCE appears it wants to take focus but Bootstrap is stopping this from happening. You should be able to override this with code like the following:

$('#myModal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});

(This assumes Bootstrap 3 and that you don't mind using jQuery which is one of the tags on this question)

Tinymce code editor is readonly in JTable Grid

2 Answers2