jQuery TinyMce Orchard 内的掉落事件

Question

我正在用 Orchrad 建立网站。我正在使用 tinymce4 html 编辑器来构建登陆页面。当我将新项目添加到我的 html 编辑器时，我没有捕获事件的问题但是我需要在 TinyMce [=] 中捕获 jQuery drop event 26=] 编辑器，并将 class 附加到被拖入 html 编辑器并删除（移动到不同位置）

的元素

如何在 TinyMce html 编辑器中插入 jQuery 删除事件？

我的果园-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");

                    }
                });

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

                    }
                });

            }
        });

jQuery TinyMce Orchard 内的掉落事件

jQuery drop event inside of TinyMce Orchard

javascript

jquery

drag-and-drop

orchardcms

tinymce-4