Jquery JTable 所见即所得而不是 textarea答案

【问题标题】：Jquery JTable WYSIWYG instead of textareaJquery JTable 所见即所得而不是 textarea
【发布时间】：2013-08-04 14:52:20
【问题描述】：

我正在使用 Jquery JTable，如果我们将字段类型设置为 textarea，它会加载一个文本区域，而不是在编辑和创建表单中输入。

我想把那个 textarea 变成一个所见即所得的编辑器。我试过但它不起作用。甚至尝试使用http://jtable.org/ApiReference#fopt-input，但它不起作用。

请告诉我该怎么做。

【问题讨论】：

也许这会对你有所帮助：jsfiddle.net/QjBh4希望这符合你的需要:))

标签： jquery textarea wysiwyg jquery-jtable

【解决方案1】：

满足您的要求。

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"/>';
           }
        }
    }
}

【讨论】：

【解决方案2】：

下载 tinymce (http://www.tinymce.com/) 并将适当的 JS/CSS 文件添加到您的项目中。

这是您需要的 JTable 代码：

    $('#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');

【讨论】：

我遇到了与stackoverflow.com/questions/19493514/jquery-jtable-with-tinymce 中提到的相同的两个问题 - 此解决方案仅适用一次，然后 POST 表单似乎无法保存 TinyMCE 编辑的结果。有什么想法吗？

【解决方案3】：

经过测试，this solution 似乎修复了 TinyMCE 未保存到文本区域的问题（原因 - jtable 中的提交事件已超载）。此外，this solution 在 jTable 关闭并重新打开编辑窗格时卸载并重新加载 TinyMCE。

把它们放在一起——这对我有用：

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);
    }

}

【讨论】：