Jquery 使用自定义样式将外部元素拖放到summernote编辑器中

我整个上午都在努力做这件事

我所拥有的 我在页面上有一个div，其中包含具有特定id的资源列表 另一个具有可编辑summernote实例的div 我想创造什么 能够将资源从列表拖到summernote编辑器中，或者使用jQueryUI使其更漂亮？ 一旦您将资源放入编辑器，它将自动以特定/自定义的方式设置样式，例如使用按钮信息样式和资源的特定id 一旦元素在编辑器中，我们就不能编辑该元素的文本，因此我们不能更改资源的标题，而是可以像使用图像一样将整个元素拖动到编辑器中的任何其他位置。 以下是所需的所有基本代码的基本技巧：

//编辑时 $'.edit'。单击，函数{ var target=$this.attr'target'； $this.parent.find'.save'.show； $this.parent.find'.edit'.hide； $“模块描述”。注释{ 身高：300， 工具栏：[ ['img'，['picture']]， ['style'，['style'，'addclass'，'clear']]， ['fontstyle'，['bold'，'italic'，'ul'，'ol'，'link'，'段落]]， ['fontstyleextra'、['Streethrough'、'underline'、'hr'、'color'、'superscript'、'subscript'] ] }; }; //保存标题或说明时 $'.save'。单击，函数{ $'module_descr'.summernote'destroy'； $this.parent.find'.save'.hide； $this.parent.find'.edit'.show； }; .保存{ 显示：无； } 资源 编辑 拯救

---

张贴答案，以防对某人有所帮助

在我哥哥的帮助下，我找到了一种方法来做我想做的事。 事实证明，使用为summernote创建自定义按钮的选项，该按钮不需要特别位于编辑器中。可以使用节点将任何内容添加到edito

fiddle中的代码是使其工作的基本代码，但以下是其功能：

有一个带有AddResource的按钮，它将资源添加到编辑器中，提取资源的id-它将添加一个可折叠的 由于contentEditable=false，您无法编辑可折叠文件，以便用户不会把一切都搞糟 保存反文本后，由于移动图标，您可以四处移动可折叠文件-Jquery Sortable使之成为可能

下面是查看代码运行情况的提琴：

改进它的一个方法是使可折叠文件在编辑器中可移动，但我不知道如何使其成为可能

 // when edit

  $('.edit').on('click', function() { var target = $(this).attr('target');  $(this).parent().find('.save').show();
  $(this).parent().find('.edit').hide();
  $('#module_descr').summernote({
  disableDragAndDrop: true,
    height: 300,
    toolbar: [
      ['img', ['picture']],
      ['style', ['style', 'addclass', 'clear']],
      ['fontstyle', ['bold', 'italic', 'ul', 'ol', 'link', 'paragraph']],
      ['fontstyleextra', ['strikethrough', 'underline', 'hr', 'color', 'superscript', 'subscript']]
        ]
      });
    });


$('.addResource').on('click', function() {
    var resourceId = $(this).parent().attr('id');
  console.log($('#3'));
  console.log($('#item2'));

  mydiv = $('<div><p>test paragraph</p></div>');
  console.log("I created a div : ", mydiv);
  var node = document.createElement('div');
  //node.textContent = "This is a DIV node\nAgain some text</br>";

  node.innerHTML = '<div class="col-md-12 resourceadded"><span class="handle button glyphicon glyphicon-move"></span><button class="btn btn-info " contenteditable="false" data-toggle="collapse" data-target="#demo_'+ resourceId + '">Collapsible '+ resourceId + '</button><div contenteditable="false" id="demo_'+ resourceId + '" class="collapse">Lorem ipsum dolor text....</div><br/><br/></div>';

  node.setAttribute("class", "test");


  // @param {Node} node
  $('#module_descr').summernote('insertNode', node);
    $('#module_info').find('.save').show();
  $('#module_info').find('.edit').hide();
});

// when saving title or description
$('.save').on('click', function() {


  $('#module_descr').summernote('destroy');
  $(this).parent().find('.save').hide();
  $(this).parent().find('.edit').show();




});




$("#module_descr").sortable({
     placeholder: 'slide-placeholder',
    axis: "y",
    revert: 150,
    start: function(e, ui){

        placeholderHeight = ui.item.outerHeight();
        ui.placeholder.height(placeholderHeight + 15);
        $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);

    },
    change: function(event, ui) {

        ui.placeholder.stop().height(0).animate({
            height: ui.item.outerHeight() + 15
        }, 300);

        placeholderAnimatorHeight = parseInt($(".slide-placeholder-animator").attr("data-height"));

        $(".slide-placeholder-animator").stop().height(placeholderAnimatorHeight + 15).animate({
            height: 0
        }, 300, function() {
            $(this).remove();
            placeholderHeight = ui.item.outerHeight();
            $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
        });

    },
    stop: function(e, ui) {
        $(this).append('<br/><br/>');
        $(".slide-placeholder-animator").remove();

    },
});