jQuery Drop-Ereignis innerhalb von TinyMce Orchard

Question

Ich baue Website mit Orchrad. Ich benutze den tinymce4 html Editor um Landing Pages zu erstellen. Ich habe kein Problem, Ereignis zu erfassen, wenn ich neues Element zu meinem HTML-Editor hinzufügen, aber ich muss fangen jQuery Drop-Ereignis innerhalb TinyMce HTML-Editor und Anhängen Klasse an Element, das innerhalb des HTML-Editors gezogen und gelöscht wurde (in andere Position verschoben)

Wie kann ich cath jQuery Drop-Ereignis innerhalb von TinyMce HTML-Editor?

Mein orchrd-tinymce.js Code:

var mediaPlugins = ""; 

if (mediaPickerEnabled) { 
    mediaPlugins += " mediapicker"; 
} 

if (mediaLibraryEnabled) { 
    mediaPlugins += " medialibrary"; 
} 

tinymce.init({ 

    theme_advanced_font_sizes: "10px,11px", 
    font_size_style_values: "12px,13px", 
    language: 'en', 
    selector: ".tinymce", 
    relative_urls: false, 
    visualblocks_default_state: true, 

    plugins: [ 
     "dragresize directionality advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker", 
     "searchreplace wordcount visualblocks visualchars contextmenu code fullscreen insertdatetime media nonbreaking", 
     "save table emoticons template paste textcolor colorpicker textpattern addcontent", 
     mediaPlugins 
    ], 

    cleanup_on_startup: false, 
    trim_span_elements: false, 
    verify_html: false, 
    cleanup: false, 
    convert_urls: false, 
    force_br_newlines: false, 
    force_p_newlines: false, 
    forced_root_block: '', 
    paste_retain_style_properties: "font-size,color,background,font-family", 
    paste_data_images: true, 
    paste_as_text: false, 
    paste_word_valid_elements: "@[style],strong,b,em,i,u,div,span,p,ol,ul,li,h1,h2,h3,h4,h5,h6,table[width],tr,td[colspan|rowspan|width],th,thead,tfoot,tbody,a[href|name],sub,sup,strike,br", 
    paste_webkit_styles: "color font-size font-family background", 
    paste_auto_cleanup_on_paste: false, 
    paste_remove_styles: false, 
    paste_remove_styles_if_webkit: false, 
    paste_strip_class_attributes: false, 

    toolbar: "example | example1 | dragresize | ltr | rtl | sizeselect | bold italic | fontselect | fontsizeselect | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor template addcontent | " + mediaPlugins, 


    setup: function (ed) { 
     ed.addButton('example', { 
      title: 'Activate Drag', 
      image: 'https://cdn1.iconfinder.com/data/icons/KDE_Crystal_Diamond_2.5_Classical_Mod/128x128/mimetypes/html.png', 
      onclick: function() { 

var editor = tinymce.activeEditor; 
var ed_body = $(editor.getBody()); 
ed_body.find('*').draggable();//here i make all items draggable 

    } 
     }); 


    }, 



    fontsize_formats: "8px 9px", 

}); 

dies versucht, und dies nicht funktioniert:

$(".html tinymce").droppable({ 
    drop: function (event, ui) { 
     $(this) 
      .addClass("MyClass"); 

    } 
}); 

Answer 1

ich diese Lösung gefunden:

Fügen Sie diese auf Ihrem Setup:

ed_body.droppable({ 
        drop: function (event, ui) { 
         $(ui.draggable).addClass("Myclass"); 

        } 
       }); 

AKTUALISIERT Setup

setup: function (ed) { 
     ed.addButton('example', { 
      title: 'Activate Drag', 
      image: 'https://icons/KDE_Crystal_Diamond_2.5_Classical_Mod/128x128/mimetypes/html.png', 
      onclick: function() { 

       var editor = tinymce.activeEditor; 
       var ed_body = $(editor.getBody()); 
       ed_body.find('*').draggable(); 


       ed_body.droppable({ 
        drop: function (event, ui) { 
         $(ui.draggable).addClass("MyClass"); 

        } 
       }); 

      } 
     });