Question

I am using Jquery ui functions and created Drag and Drop plugins. The all i have achieved is the draggable item and droppable area and implemented this successfully.

My next step is to drop my working plugins to be drop into the ckeditor body both source or design view.

i am using this code to make drag drop.

HTML

 <div class="item" id="image">
    <label class="title">Image</label>
    <label class="price"></label>
</div>
<div id="cart_items" class="back"></div>

JavaScript :

$("#cart_items").droppable({
            accept: ".item",
            //activeClass: "drop-active",
            //hoverClass: "drop-hover",
            drop: function(event, ui) {

            var coordsp=[];
            var coordsc=[];  
                var item        =   ui.draggable.html();
                var itemid      =   ui.draggable.attr("id"); 
                //alert(itemid);
                var coordsp     =   $('#cart_toolbar').position();

                var coordTopp   =   coordsp.top ;
                var coordLeftp  =   coordsp.left;
                //alert(itemid);
                var coordsc     =   $('#'+itemid).position();    

                //alert(coordsc.top);
                //alert(coordsc.left);
                var coordTopc   =   coordsc.top ;
                var coordLeftc  =   coordsc.left;
                var coordLeft   =   coordLeftc-coordLeftp;
                //var coordLeft   =   0;
                var coordTop    =   coordTopc-coordTopp;

                //numControls++;
                var numControls = document.getElementById('numControls');
                controls_count += 1; 
                numControls.value = controls_count; 
                count += 1;

                var hrml_sort_pre =  '<div class="column" id="column1">';


                if(itemid == "image")
                {
                    var html        =  '<div class="dragbox" id="item'+count+'"><img src="<?=base_url()?>/css/move_arrow.gif" alt="no-image" class="drag-image"><h2 id="'+count+'" value="para_1" onclick="do_collapse(this);" onmouseup="do_fill_data(this.id);" onmouseover="fetch_editor_data(this.id);" >&nbsp;</h2><div style="float:right;margin-top:-20px;margin-right:4px"><a  onclick="remove_item(\'item'+count+'\')" id="remove'+itemid+count+'" class="remove'+itemid+count+' x-button">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div><div class="dragbox-content" ><div id="item_cart_'+count+'"  style="  position: relative; left: 0px; top:-2px;width:100%;">';
                                        html = html + '<a id="image_'+count+'" href="<?=base_url()?>index.php/media/index/'+count+'" ><img src="<?=base_url()?>images/na.jpg" id="temp_image_'+count+'" name="para_'+count+'" onclick="box_load(\'image_'+count+'\')" title = " " alt = ""  /></a><input type="hidden" name="control_type[]" value="image" /><input type="hidden" id="input_temp_image_'+count+'" name="content[]" value="" /> <input type="hidden" name="image-para[]" value="" /></div></div></div>';

                }
$("#cart_items").append(html); }}

Is there any way that we can use this to drop image html in editor and call some function on it.

Thanks in advance

Answer 1

You could create a CKEditor plugin that creates a button on the toolbar. This button would then inject the javascript, and then the markup for the drop area.

However, I see a major problem with this kind of implementation. Be careful when putting script tags inside the CKEditor body, as CKEditor will most likely filter this out upon submit.

Instead of creating a plugin which would inject the HTML into the body of the editor (thus creating multiple copies of the same code around the site), why not use a token, and then parse the token upon loading the content into the page?

Here’s a couple of references for creating CKEditor plugins to help get you started:

• CKEditor Plugin Development
• Official CKEditor Plugin Creation Tutorial
• The CKEditor Javascript API