2016-07-05 59 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"); 

        } 
       }); 

      } 
     });