带有tinymce的jquery jtable答案

【问题标题】：jquery jtable with tinymce带有tinymce的jquery jtable
【发布时间】：2013-10-29 21:15:29
【问题描述】：

是否可以为创建/编辑操作的 jquery jtable 插件添加 tinymce 编辑器？

我是 jTable 插件的新手，但是我需要对 jquery jtable 的创建/编辑操作中的一个字段使用 tinymce 编辑器，所以我想知道我可以使用 jtable 吗？

我知道我可以在创建/编辑表单中将 jtable 字段设置为 textarea，所以我想知道是否可以在其中添加 tinymce？

1) 如果我使用简单的标准代码在主页（调用 jtable 的地方）添加 tinymce，则创建/编辑记录不会发生任何事情（没有 tinymce）：

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

2) 我还尝试编辑核心 jtable 文件，将 tinymce 添加到每个文本区域。它向我展示了 tinymce 编辑器，但问题出在 POST 上。当我发布表单时，它总是给我空值（应该用 tinymce 编辑的值）。

这就是我在 jtable 脚本中直接附加 tinymce 的方式：

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

3) 最后一个想法是我尝试过的，对字段使用 jTable 输入选项：

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

这给了我一些语法错误。我有一些语法错误，但我确信我可以使用这样的东西。

【问题讨论】：

标签： php jquery tinymce jquery-jtable

【解决方案1】：

试试这个代码：

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

【讨论】：

【解决方案2】：

经过测试，this solution 似乎修复了 TinyMCE 未保存到 textarea 的问题（原因 - 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);
    }

}

【讨论】：