プロジェクト(PHP、Codeigniter)の既存のHTMLフォームにTinyMCE(version 4.0.2)エディターを追加しました。私の最後の目標は、TinyMCEエディターを含むフォームで変更が発生した場合にフォーム送信ボタンを有効にすることです。 TinyMCEエディター以外のフォームでのみできます。 TinyMCEの変更を検出できませんでした。
キーアップ時に変更が発生したかどうかを検出したい。 tinymceには以下のようなonchange機能があることがわかりました。
setup : function(ed) {
ed.onChange.add(function(ed, l) {
console.debug('Editor contents was modified. Contents: ' + l.content);
});
上部のセットアップコードを以下のinit関数に入れましたが、出力が見つかりませんでした。
tinymce.init({ });
変更を検出する方法、またはより良いアイデアを教えてもらえますか?
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
});
Keyup wo n'tはすべてのケースをキャプチャすることに注意してください。たとえば、copy
からではなく、paste
からのcut
/menu
/keyboard
あなたが望むなら、あなたはそれらをキャプチャすることができます
editor.on('paste', function(e) {
console.debug('paste event');
});
editor.on('cut', function(e) {
console.debug('cut event');
});
[〜#〜] note [〜#〜] tinymceからcut
およびpaste
をキャプチャする場合、おそらくキーアップからのイベントを処理しないでください。私がやったことは、キーが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();
},
この関数をキーアップイベントから呼び出します。このようにして、カットアンドペーストでいくつかのアクションを2回実行することで、自分自身を保存できます。
[〜#〜] note [〜#〜]すぐに、style changes
から発生するmenu
will [〜#〜] not [〜#〜]これらのイベントもトリガーします。
私はまだスタイルの変化を捉えるための答えを探しています。
私はパーティーに遅れていますが、今後の参考のために、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());
});
}
});
それは私のために働く:
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());
});
}
});
また
ed.on('SaveContent', function(e) {
または
ed.on('submit', function(e) {
ページにあります http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor Section Event
以下は、「キーアップ」およびその他の変更イベント(コピー、貼り付け、中央揃えなど)をキャプチャします。
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());
}
私は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());
});
}
});
説明:
on( "change")は、ツールバーアイコンまたはメニューから選択をクリックすると、マウスイベントの変更を検出します。また、キーボードイベントを検出することもできますが、フォーカスが失われた後でなければなりません(リアルタイムではありません)。
on( "keyup")は、リアルタイムキーボードイベントの変更を検出するためのものです
tinymce.init({
// ...
setup: function(editor) {
editor.on('Paste Change input Undo Redo', function () {
if (editorChangeHandler) {clearTimeout(editorChangeHandler);}
editorChangeHandler = setTimeout(function() {
console.log('changed');
}, 100);
});
}
// ,...
});
これを試して:
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);
});
}
});
参照はこちら を選択します
これはすべての条件で私にとってうまくいくキーアップ、カット、コピー、ペースト
setup: function (editor) {
editor.on('KeyUp', function(e){
alert(editor.getContent());
});
}
変更イベントは、Enterキーを押した後にのみ発生することがあります。 ndo processingに結びついているようです。また、shiftまたはCMD-Aが押されたときなど、コンテンツが変更されていないときに、keyupイベントが発生します。
したがって、changeとkeyupの両方を使用し、最後に処理された値を現在の値と比較して、実際の変更を検出します。
このソリューションは、切り取り、貼り付け、およびメニュー項目からの変更にも有効です。
//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);
}
});
上記のソリューションは、tinymce updoボタンが使用されたかどうかを検出しません。残念ながら、どちらもこれはしませんが、もう少し意味的に正しいです。
if (tinymce.activeEditor.isDirty()) {
alert("Your content is changed.");
}
http://archive.tinymce.com/wiki.php/api4:method.tinymce.Editor.isDirty