jQuery событие падения внутри TinyMce Orchard

Question

Я строю сайт с Orchrad. Я использую редактор tinymce4 html для создания целевых страниц. У меня нет проблем, чтобы поймать событие, когда я добавляю новый элемент в свой редактор html. НО мне нужно поймать событие jQuery drop внутри редактора TinyMce html и добавить класс к элементу, который был перетащен внутри редактора html и удален (перемещено в другое положение)

Как я могу cath Событие jQuery drop внутри редактора TinyMce html?

Мой orchrd-tinymce.js код:

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", 

}); 

Пробовал это, и это не работает:

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

    } 
}); 

Answer 1

Я нашел это решение:

Добавьте это в настройки:

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

        } 
       }); 

ОБНОВЛЕНО установка

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

        } 
       }); 

      } 
     });