Soru TinyMCE'deki değişiklikler nasıl tespit edilir?


Projemde (PHP, Codeigniter) mevcut bir HTML formunda TinyMCE (sürüm 4.0.2) editörünü ekledim. Son hedefim, TinyMCE editörü de dahil olmak üzere formda herhangi bir değişiklik olursa, form gönderme düğmesini etkinleştirmektir. Ben sadece TinyMCE editörü hariç formu ile yapabilirim. TinyMCE değişikliklerini tespit edemedim.

Anahtarlama sırasında herhangi bir değişiklik olup olmadığını tespit etmek istiyorum. Tinymce'ın feryat gibi bir değişme fonksiyonuna sahip olduğunu gördüm.

            setup : function(ed) {
            ed.onChange.add(function(ed, l) {
                console.debug('Editor contents was modified. Contents: ' + l.content);
            });

Üst kurulum kodunu feryat init fonksiyonuna soktum ama bulduğum bir çıktı yok.

tinymce.init({ });

Değişikliği nasıl algılayabileceğinizi veya daha iyi bir fikri nasıl anlatabilir misiniz?


27
2017-07-23 06:07


Menşei




Cevaplar:


Partiye geç kaldım, ama gelecekteki referans için TinyMCE 4.X'te bunu nasıl yapıyorsun?

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

49
2017-10-04 09:34



değişiklik olayı yalnızca editör odağı kaybettiğinde (yazım değişiklikleri için) tetiklenir. Bu bir sonraki cevapla birleştirilmelidir. Formatı / sürükle-bırak değişikliğini yakalamak için - oak


Tinymce 4 için benim için çalışıyor,

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

DÜZENLE:

Bu tuşa dikkat edin alışkanlık tüm vakaları ele geçir. Örneğin copy/paste/cut itibaren menu ve değil keyboard

eğer istersen bunları yakalayabilirsin

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

                });

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

                });

NOT yakalarsan cut ve paste tinymce'den muhtemelen bu olayı anahtarlamadan işlememelisiniz. Yaptığım şey sadece anahtarlar için anahtar değilse cut & paste yani:

 /**
 * 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();

},

ve bu işlevi tuş olayından çağırın. Bu şekilde kendinizi kurtaracak ve yapıştırarak iki kez harekete geçeceksiniz.

NOT yakında anlayacaksın ki style changes bu gerçekleşir menu irade DEĞİL Bu olayı da tetikler.

Stil değişikliğini yakalamak için hala bir cevap arıyorum.


25
2017-07-24 04:03



Editör nedir? - Rooster242
@ Rooster242 editörü setup argüman gibi setup : function(editor) {} - Mehdi Hadjar
Yapıştırmayı kontrol etmek bana gelmedi. Teşekkür ederim! - idungotnosn


Bu benim için çalışıyor:

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

Ayrıca

ed.on('SaveContent', function(e) {  

veya

ed.on('submit', function(e) {

Sayfada bulundu http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor Bölüm Etkinliğinde


11
2017-10-07 17:42



Bu 'NodeChange' renk değişikliklerini tespit edecek tek şey - 4.1.2. - Taylor Hakes
Ben 'keyup' ve 'NodeChange' ve şimdi ed.on çalışıyor ('NodeChange', function (e) {}); ed.on ('anahtarlama', işlev (e) {}); - Hazem


Aşağıdaki "anahtarlama" ve diğer değişiklik olaylarını (kopyalama, yapıştırma, merkez, vb.) Yakalayacaktır:

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
2017-11-01 04:07





Bunu tinymce içinde kullanıyorum 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());
        });
   }
});

Açıklama:

on ("change"), menü çubuğunda araç çubuğu simgesini veya seçimini tıklatırsanız fare olayındaki değişiklikleri algılamak içindir. Ayrıca klavye olayını da algılayabildi, ancak sadece odaklanma kaybettikten sonra (gerçek zamanlı değil).

on ("keyup"), gerçek zamanlı klavye olayındaki değişiklikleri tespit etmek içindir


6
2017-08-28 02:37





Bunu dene:

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

İçin CLick Burada rreference


3
2017-07-23 06:23



Onu kullandım, ancak herhangi bir değişiklik olduğunda sonucun nerede bulunacağı. Bana söyler misin lütfen? - user2603482
Yukarıdaki kod, sizin için çalışıyorsa bir kez deneyin. - Nil'z
Ancak bu kodu kullanırken, tinymce editörü kutusu kaybolur. Lütfen neden kaybolduğunu söyler misin? - user2603482
Denedim ve editör kutum da kayboldu - çünkü sanırım onChange artık 4.x'de bir fonksiyon değil. Teorik olarak, "değişim" adlı benzer bir işlevle değiştirdiler, ama bu benim için hiç çalışmıyor. - Erhannis


Değişim olayının bazen sadece enter tuşuna bastıktan sonra patladığını gördük; İçine bağlı görünüyor işleme geri al. Ayrıca, anahtarlama olayı, içerikler değişmediğinde vardiya veya CMD bir basılır.

Yani ikisini de kullanıyoruz değişiklik ve keyUpve gerçek bir değişikliği tespit etmek için son işlenen değeri mevcut değere karşılaştırın.

Bu çözüm ayrıca, menü öğelerinden kesme, yapıştırma ve modifikasyon için de çalışır.

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

1
2017-08-13 11:08