it-swarm.dev

كيفية اكتشاف التغييرات في TinyMCE؟

أضفت محرر TinyMCE (الإصدار 4.0.2) في نموذج HTML موجود في مشروعي (PHP ، Codeigniter). هدفي النهائي هو تمكين زر إرسال النموذج في حالة حدوث أي تغييرات في النموذج بما في ذلك محرر 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({ });

هل يمكنك معرفة كيفية اكتشاف التغيير ، أو أي فكرة أفضل؟

34
user2603482

بالنسبة 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 لن التقاط جميع الحالات. على سبيل المثال copy/paste/cut من menu وليس من keyboard

إذا كنت تريد يمكنك التقاط تلك مع

editor.on('paste', function(e) {
                    console.debug('paste event');

                });

editor.on('cut', function(e) {
                    console.debug('cut event');

                });

ملاحظة إذا قمت بالتقاط cut و paste من tinymce ، فمن المحتمل ألا تعالج هذه الأحداث من 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();

},

واستدعاء هذه الوظيفة من الحدث keyup. بهذه الطريقة ستوفر على نفسك بعض الإجراءات مرتين على القص واللصق

ملاحظة قريبًا ستكتشف أن أي style changes هذا يحدث من menu سوف لا تحريك هذه الفعالية أيضًا ..

ما زلت أبحث عن إجابة لالتقاط تغيير النمط.

31
user2603482

لقد تأخرت عن الحفلة ، لكن للرجوع إليها في المستقبل ، كيف يمكنك القيام بذلك في 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());
       });
   }
});
59
sica07

هذا يعمل لي:

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 في قسم الأحداث

12
Martin

سيحصل التالي على "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());
}
8
oalbrecht

ايم استخدام هذا في 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());
        });
   }
});

شرح:

على ("تغيير") هو للكشف عن التغييرات في حدث الماوس إذا قمت بالنقر فوق رمز شريط الأدوات أو التحديد من القائمة. يمكنه أيضًا اكتشاف حدث لوحة المفاتيح ولكن فقط بعد فقدان التركيز (ليس في الوقت الفعلي).

على ("keyup") هو للكشف عن التغييرات في حدث لوحة المفاتيح في الوقت الحقيقي

6
Syukri Hakim Abdul Rahman
tinymce.init({
    // ...
    setup: function(editor) {
        editor.on('Paste Change input Undo Redo', function () {
            if (editorChangeHandler) {clearTimeout(editorChangeHandler);}
            editorChangeHandler = setTimeout(function() {
                console.log('changed');
            }, 100);
        });
    }
    // ,...
});
4
Nagy Zoltán

جرب هذا:

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

انقر للحصول على Rreference هنا

3
Nil'z

هذا يعمل بشكل جيد بالنسبة لي في كل حالة keyup ، قص ، نسخ ، لصق

    setup: function (editor) {
        editor.on('KeyUp', function(e){
            alert(editor.getContent());
         });
}
2
sandeep kumar

لقد وجدنا أن حدث التغيير أحيانًا ينطلق فقط بعد الضغط على enter ؛ يبدو أن مرتبطة التراجع عن المعالجة. أيضًا ، يتم إطلاق حدث keyup عندما لا تتغير المحتويات ، مثل عندما يتم الضغط على shift أو CMD-A.

لذلك نحن نستخدم كل من تغيير و 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);
    }
});
2
Steven Spungin

لن تكتشف الحلول المذكورة أعلاه ما إذا كان قد تم استخدام زر التحديث الخاص بـ tinymce. لسوء الحظ ، لن يفعل ذلك ، لكنه صحيح قليلاً بشكل واضح.

if (tinymce.activeEditor.isDirty()) {
    alert("Your content is changed.");
}

http://archive.tinymce.com/wiki.php/api4:method.tinymce.Editor.isDirty

1
user1032531