TinyMce OrchardのjQueryドロップイベント

Question

私はOrchradでウェブサイトを構築しています。 私はtinymce4 htmlエディタを使用してランディングページを構築しています。 私はhtmlエディタに新しい項目を追加するときにイベントをキャッチするのに問題はありませんが、jQueryドロップイベントをTinyMce htmlエディタ内に配置し、htmlエディタ内でドラッグしてドロップした要素にクラスを追加してドロップ

どうすればいいですか？jQueryドロップイベント 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"); 

        } 
       }); 

      } 
     });