jquery jtable with tinymce

Question

Is it possible to add tinymce editor for jquery jtable plugin for Create / Edit action?

I am new to jTable plugin, but I need tinymce editor for one field in Create / Edit action of jquery jtable, so I wonder can I use jtable?

I know that I can make a jtable field to be textarea in Create / Edit form, so I wonder if I can somehow add tinymce there?

1) If I use simple standard code for adding tinymce in main page (where jtable is called), then nothing happends to Create / Edit record (no tinymce):

<script type="text/javascript">
    tinymce.init({
        selector: "textarea"        
    });
</script>

2) I also tried to edit core jtable file adding tinymce to each textarea. It shows me tinymce editor, but the problem is with POST. When I post form it always give me empty value (the one that should be edited with tinymce).

This is how I append tinymce directly in jtable script:

.append('<script>tinymce.init({selector: "textarea"});</script>');

3) And the last think I tried, using jTable input option for field:

article: {
   title: 'Article',                    
   input: function (data) {
        return 'tinymce.init({selector: "textarea"});<textarea></textarea>';
   },

This gies me some syntax error. I have some syntax error, but I am sure that I can use something like this.

score 1 · Answer 1 · edited Dec 23 '13 at 14:05

1

Try this code:

formCreated: function(event, data)
            {
                tinymce.init({
                    selector: "textarea"
                });
            }

edited Dec 23 '13 at 14:05

Shiva Saurabh

1,281
2
25
47

answered Dec 23 '13 at 13:41

ktincheva

21
2

score 1 · Answer 2 · edited May 23 '17 at 12:14

After testing, it appears that this solution fixes the problem with TinyMCE not saving to the textarea (reason - the submit event within jtable is overloaded). Also, this solution unloads and reloads TinyMCE when the jTable closes and reopens an editing pane.

Putting them together -- this worked for me:

formCreated: function (event, data) {

    tinymce.init({
        selector: 'textarea',
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        }
    });

    for (var editor_id in tinyMCE.editors) {
        tinyMCE.editors[editor_id].getBody().setAttribute('readonly', '1');
        tinymce.EditorManager.execCommand('mceAddControl', true, editor_id);
        tinymce.EditorManager.execCommand('mceAddEditor', true, editor_id);
    }

},
formClosed: function (event, data) {

    for (var editor_id in tinyMCE.editors) {
        tinyMCE.editors[editor_id].getBody().setAttribute('readonly', '1');
        tinymce.EditorManager.execCommand('mceRemoveControl', true, editor_id);
        tinymce.EditorManager.execCommand('mceRemoveEditor', true, editor_id);
    }

}

jquery jtable with tinymce

2 Answers2

Linked