Jquery JTable WYSIWYG instead of textarea

Question

I'm using Jquery JTable in which if we set the field type to textarea, it loads a text area instead of input in edit and create forms.

I want to make that textarea into an WYSIWYG Edior. I've tried but its not working. Even tried using http://jtable.org/ApiReference#fopt-input but it doesn't work.

Please tell me how to do this.

Maybe this would help you: http://jsfiddle.net/QjBh4/ Hope this fits your need :)) — mrakodol, Sep 17 '13 at 06:06

score 0 · Answer 1 · answered May 25 '14 at 22:13

for your request.

Name: {
    title: 'Name',
    width: '20%',
    input: function (data) {
      if (data.record) {
      return '<textarea cols="30" id="Name" name="Name" rows="5" wrap="hard">' + data.record.Name+ '</textarea>';
      } else {
        return '<textarea cols="30" rows="5" wrap="hard" name="Name"/>';
           }
        }
    }
}

score 0 · Answer 2 · answered Feb 22 '15 at 06:03

Download tinymce (http://www.tinymce.com/) and add the appropriate JS/CSS files to your project.

Here's the JTable code you need:

    $('#JTableContainer').jtable({
        title: 'My Table',
        actions: {
            listAction: '/MyAction/List',
            createAction: '/MyAction/Add',
            updateAction: '/MyAction/Edit',
            deleteAction: '/MyAction/Delete'
        },
        fields: {
            TableID: {
                key: true,
                list: false
            },
            MyTextArea: {
                title: 'Fill out this form',
                type: 'textarea'
            },
        },
        formCreated: function (event, data) {
            tinymce.init({
                selector: 'textarea',
                theme: 'modern',
                toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link unlink | cut copy paste | forecolor backcolor',
                menubar: false,
                statusbar: false
            });
        }
    });

    $('#JTableContainer').jtable('load');

I'm having the same two problems as mentioned in http://stackoverflow.com/questions/19493514/jquery-jtable-with-tinymce - that this solution only works once, then POST forms don't seem to save the results of the TinyMCE edits. Any ideas? — JayCrossler, Jan 31 '16 at 22:04

score 0 · Answer 3 · edited May 23 '17 at 12:30

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 WYSIWYG instead of textarea

3 Answers3