Php Jquery拖放编辑器

我正在使用jQueryUI函数并创建拖放插件。我所取得的一切就是可拖动项和可拖放区域，并成功地实现了这一点

我的下一步是将我的工作插件放入ckeditor主体（源代码视图或设计视图）

我正在使用此代码进行拖放

HTML

形象

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

$（“#购物车项目”）。可拖放({
接受：“.item”，
//activeClass:“删除活动”，
//悬停类：“放下悬停”，
drop：函数（事件、用户界面）{
var-coordsp=[]；
var-coordsc=[]；
var item=ui.draggable.html（）；
var itemid=ui.draggable.attr（“id”）；
//警报（itemid）；
var coordsp=$（“#购物车工具栏”）.position（）；
var coordtop=coordsp.top；
var coordLeftp=coordsp.left；
//警报（itemid）；
var coordsc=$（'#'+itemid）.position（）；
//警报（协调器顶部）；
//警惕（左协调）；
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'）；
控制_计数+=1；
numControls.value=控制计数；
计数+=1；
var hrml_sort_pre=''；
if（itemid==“image”）
{
var html='/css/move_arrow.gif“alt=”no image“class=”drag image“>”；
}
$（“#购物车项目”）.append（html）；}

是否有任何方法可以使用它在编辑器中删除图像html并调用一些函数

---

提前感谢

您可以创建一个CKEditor插件，在工具栏上创建一个按钮。该按钮将插入javascript，然后插入拖放区域的标记

但是，我发现这种实现存在一个主要问题，在将脚本标记放入CKEditor主体时要小心，因为CKEditor很可能在提交时过滤掉它

与其创建一个将HTML注入编辑器主体的插件（从而在站点周围创建相同代码的多个副本），为什么不使用令牌，然后在将内容加载到页面时解析令牌

以下是创建CKEditor插件以帮助您入门的两个参考资料：

$("#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); }}