Блог

Я использую функции пользовательского интерфейса Jquery и создал плагины перетаскивания. Все, чего я добился, — это перетаскиваемый элемент и удаляемая область, и успешно реализовал это.

Мой следующий шаг — удалить мои рабочие плагины, которые будут помещены в тело ckeditor как в исходном, так и в проектном представлении.

я использую этот код для перетаскивания.

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);" >amp;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">amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;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); }}
 

Есть ли какой-либо способ, которым мы можем использовать это, чтобы удалить html-изображение в редакторе и вызвать для него какую-либо функцию.

Заранее спасибо

Вы могли бы создать плагин CKEditor, который создает кнопку на панели инструментов. Затем эта кнопка вводит javascript, а затем разметку для области перетаскивания.

Однако я вижу серьезную проблему с такой реализацией. Будьте осторожны при размещении тегов скрипта внутри тела CKEditor, так как CKEditor, скорее всего, отфильтрует это при отправке.

Вместо создания плагина, который вводил бы HTML в тело редактора (создавая таким образом несколько копий одного и того же кода по всему сайту), почему бы не использовать токен, а затем проанализировать токен при загрузке содержимого на страницу?

Вот несколько ссылок для создания плагинов CKEditor, которые помогут вам начать:

• Разработка плагина CKEditor
• Официальный учебник по созданию плагинов CKEditor
• CKEditor Javascript API