2016-07-05 14 views
0

我正在用Orchrad構建網站。 我使用tinymce4 html編輯器來構建着陸頁。 當我向html編輯器添加新項目時,我沒有遇到問題,但是我需要捕獲jQuery拖放事件,它位於TinyMce html編輯器內部,並將類添加到HTML編輯器中拖動的元素中,並將其刪除(移動到不同的位置)jQuery下降TinyMce果園內的事件

我該如何才能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"); 

    } 
}); 

回答

0

我發現這個解決方案:

添加到您的設置:

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

        } 
       }); 

      } 
     });