使用 tinyMCE 获取内容？答案

【问题标题】：getting contents with tinyMCE?使用 tinyMCE 获取内容？
【发布时间】：2012-03-27 18:31:04
【问题描述】：

我有一个 tinyMCE textarea #frmbody 并且正在使用它的 jquery 实例。

<textarea class="tinymce" name="frmbody" id="frmbody" cols="30" rows="20"></textarea>

我正在尝试在用户键入时获取 textarea 的内容。

$("#frmbody").live('keyup', function(e) {
    alert("keyup");
});

上面的代码不起作用，我不知道为什么。如果我删除 tinyMCE 实例，上面的代码可以正常工作。有任何想法吗？

【问题讨论】：

不知道，但 tinyMCE 可能会创建（或重新创建）您实际输入的不同文本区域，因此 #frmbody 从来没有任何关键活动。
我也是这么想的。我会继续挖掘和搜索。谢谢
唯一的另一件事是当我检查 $_POST 值时，frmbody 在那里。
tinyMCE 隐藏您的文本区域并自行处理所有输入。当表单发布时，它会将创建的 HTML 复制回您的文本区域。但是，它有大量自己的事件可供您参与。

标签： javascript jquery tinymce wysiwyg

【解决方案1】：

这是因为 TinyMCE 的实例不是真正的文本区域，因此无法检测到 keyup 事件。请改用onchange callback。

【讨论】：

【解决方案2】：

您可以通过以下方式使 tinyMCE 成为自己的侦听器： http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onKeyUp

或自己编写并使用内置函数 getContent： http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

【讨论】：

【解决方案3】：

可以使用以下方法获取编辑器的内容：

tinymce.activeEditor.getContent();

如果你想附加一个 onchange 事件，根据这个页面，http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor，使用以下代码创建编辑器：

var ed = new tinymce.Editor('textarea_id', { 
    init_setting_item: 1,
    ...
}, tinymce.EditorManager);

ed.on('change', function(e) {
    var content = ed.getContent();
    $("#textarea_id").val(content); // update the original textarea with the content
    console.log(content);
});

ed.render();

请注意，onchange 会在用户松开焦点、按下回车键或按下工具栏按钮而不是每次击键时触发。

【讨论】：

【解决方案4】：

编写自己的处理程序并将其分配给编辑器 iframe 文档非常容易。已经定义了各种事件的 tinymce 处理程序，例如 keyUp

这是为编辑器 iframe 文档分配自己的处理程序的标准方法

var my_handler = function(event) {
    alert('my handler fired!');
};

var ed = tinymce.get('my_editor_id');
$(ed.getDoc()).bind('keyup', my_handler);

【讨论】：

【解决方案5】：

TinyMCE 隐藏文本区域并创建一个 html 容器。如果您在框中写入内容，则它是一个名为 "TEXTAREANAME_ifr" 的 iFrame。

所以试试这个：

$("#frmbody_ifr").live('keyup', function(e) {
    alert("keyup");
});

我认为正如 Thariama 已经说过的，TinyMCE 的 EventHandler 将是最好的方法。

【讨论】：