jQuery 如何检测 TinyMCE 的变化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17802592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect changes in TinyMCE?
提问by user2603482
I added TinyMCE(version 4.0.2) editor in a existing HTML form in my project(PHP,Codeigniter). My final target is to enable the form submit button if any changes occur in the form including TinyMCE editor. I can do it only with the form except TinyMCE editor. I could not detect TinyMCE changes.
我在我的项目（PHP，Codeigniter）中的现有 HTML 表单中添加了 TinyMCE（版本 4.0.2）编辑器。我的最终目标是在包括 TinyMCE 编辑器在内的表单中发生任何更改时启用表单提交按钮。除了 TinyMCE 编辑器之外，我只能使用表单来完成。我无法检测到 TinyMCE 的变化。
I want to detect if any change occur when key up. I have seen that tinymce has an onchange function like bellow.
我想检测按键时是否发生任何变化。我已经看到 tinymce 具有如下所示的 onchange 功能。
setup : function(ed) {
ed.onChange.add(function(ed, l) {
console.debug('Editor contents was modified. Contents: ' + l.content);
});
I putted upper setup code inside the bellow init function, but no output i have found.
我将上层设置代码放在波纹管 init 函数中，但没有找到输出。
tinymce.init({ });
Can you tell how to detect change, or any better idea?
你能说出如何检测变化，或者有什么更好的主意吗？
采纳答案by user2603482
For Tinymce 4 it works for me,
对于 Tinymce 4，它对我有用，
editor.on('keyup', function(e) {
alert('keyup occured');
//console.log('init event', e);
console.log('Editor contents was modified. Contents: ' + editor.getContent());
check_submit(); //another function calling
});
EDIT:
编辑：
Note that keyup won'tcapture all cases. for example copy/paste/cutfrom menuand not from keyboard
请注意，keyup不会捕获所有情况。例如copy/ paste/cut从menu而不是从keyboard
if you want you can capture those with
如果你愿意，你可以用
editor.on('paste', function(e) {
console.debug('paste event');
});
editor.on('cut', function(e) {
console.debug('cut event');
});
NOTEif you capture cutand pastefrom tinymce you should probably not process those event from keyup. What I did is to do save only if the keys are not keys for cut& pastei.e :
注意，如果您从 tinymce捕获cut和捕获，paste您可能不应该从 keyup 处理这些事件。我所做的是仅当键不是cut&paste即的键时才保存：
/**
* MCE keyup callback, update the master model selected attribute
*
* @method tinyMCEKeyup
*/
tinyMCEKeyUp : function(e) {
console.log('tinymce:keyup');
var ctrlDown = false;
var ctrlKey = 17, vKey = 86, xKey = 88;
if ((e.ctrlKey) && (e.keyCode === vKey)) {
console.log('paste from keyboard')
/* got here. do nothing. let paste event handle this one */
return;
} else if ((e.ctrlKey) && (e.keyCode === xKey)) {
console.log('cut from keyboard')
/* got here. do nothing. let paste event handle this one */
return;
}
this.doSave();
},
and call this function from the keyup event. This way you will save yourself do some actions twice on cut & paste
并从 keyup 事件调用此函数。通过这种方式，您可以节省自己在剪切和粘贴时执行两次操作
NOTEsoon you will figure out that any style changesthat happens from menuwill NOTtrigger those event as well..
请注意，您很快就会style changes发现发生的任何事情menu也不会触发这些事件。
I'm still looking for an answer to capture style change.
我仍在寻找捕捉风格变化的答案。
回答by sica07
I'm late to the party, but for future reference here is how you do it in TinyMCE 4.X:
我迟到了，但为了将来参考，这里是你在 TinyMCE 4.X 中的做法：
tinyMCE.init({
setup:function(ed) {
ed.on('change', function(e) {
console.log('the event object ', e);
console.log('the editor object ', ed);
console.log('the content ', ed.getContent());
});
}
});
回答by Martin
That works for me:
这对我行得通：
tinyMCE.init({
setup : function(ed){
ed.on('NodeChange', function(e){
console.log('the event object ' + e);
console.log('the editor object ' + ed);
console.log('the content ' + ed.getContent());
});
}
});
also
还
ed.on('SaveContent', function(e) {
or
或者
ed.on('submit', function(e) {
Found on page http://www.tinymce.com/wiki.php/api4:class.tinymce.Editorin Section Event
在页面事件中找到http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor
回答by oalbrecht
The following will capture "keyup" and other change events (copy, paste, center, etc.):
以下将捕获“keyup”和其他更改事件（复制、粘贴、居中等）：
tinymce.init({
setup: function (ed) {
ed.on('keyup', function (e) {
tinyMceChange(ed);
});
ed.on('change', function(e) {
tinyMceChange(ed);
});
}
});
function tinyMceChange(ed) {
console.debug('Editor contents was modified. Contents: ' + ed.getContent());
}
回答by Nagy Zoltán
tinymce.init({
// ...
setup: function(editor) {
editor.on('Paste Change input Undo Redo', function () {
if (editorChangeHandler) {clearTimeout(editorChangeHandler);}
editorChangeHandler = setTimeout(function() {
console.log('changed');
}, 100);
});
}
// ,...
});
回答by Syukri Hakim Abdul Rahman
Im using this in tinymce 4.x
我在 tinymce 4.x 中使用这个
tinymce.init({
selector: "#tinymce-textarea",
setup : function(ed) {
ed.on("change", function(e){
$('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
});
ed.on("keyup", function(){
$('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
});
}
});
Explanation:
解释：
on("change") is for detect changes on mouse event if u click toolbar icon or selection from the menu. It also able to detect the keyboard event but only after lost focus (not real time).
on("change") 用于检测鼠标事件的变化，如果你点击工具栏图标或从菜单中选择。它还能够检测键盘事件，但只能在失去焦点后（非实时）。
on("keyup") is for detect changes on real time keyboard event
on("keyup") 用于检测实时键盘事件的变化
回答by Nil'z
Try this:
尝试这个：
tinyMCE.init({
setup : function(ed) {
ed.onChange.add(function(ed, l) {
var editorContent = l.content; // editorContent will hold the values of the editor
alert(editorContent);
});
}
});
CLick for the Rreference here
单击该Rreference这里
回答by Steven Spungin
We have found that the change event sometimes only fires after pressing enter; It seems to be tied into the undo processing. Also, the keyup event fires when the contents have not changed, such as when shiftor CMD-Aare pressed.
我们发现 change 事件有时只有在按下 Enter 键后才会触发；它似乎与撤消处理有关。此外，当内容没有改变时，keyup 事件会触发，例如按下shift或CMD-A 时。
So we use both changeand keyup, and compare the last processed value to the current value to detect a real change.
所以我们同时使用change和keyup，并将最后处理的值与当前值进行比较以检测真正的变化。
This solution also works for cut, and paste, and modifications from menu items.
此解决方案也适用于菜单项的剪切、粘贴和修改。
//Sometimes does not fire unless enter is pressed
editor.on('change', () => {
var value = editor.getContent();
if (value !== editor._lastChange) {
editor._lastChange = value;
window.console.log(editor._lastChange);
}
});
//Sometimes fires even if content did not change
editor.on('keyup', () => {
var value = editor.getContent();
if (value !== editor._lastChange) {
editor._lastChange = value;
window.console.log(editor._lastChange);
}
});
回答by sandeep kumar
This work fine for me in all condtion key up , cut, copy , paste
这对我来说在所有条件下都很好，剪切，复制，粘贴
setup: function (editor) {
editor.on('KeyUp', function(e){
alert(editor.getContent());
});
}
回答by user1032531
The above solutions will not detect whether the tinymce updo button was used. Unfortunately, neither will this, but it is a little more semantically correct.
上述解决方案不会检测是否使用了tinymce updo按钮。不幸的是，这也不会，但它在语义上更正确一些。
if (tinymce.activeEditor.isDirty()) {
alert("Your content is changed.");
}
http://archive.tinymce.com/wiki.php/api4:method.tinymce.Editor.isDirty
http://archive.tinymce.com/wiki.php/api4:method.tinymce.Editor.isDirty
