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

Question

我整个上午都在为尝试这样做而苦苦思索。

我有什么

我在页面上有一个 div，其中包含资源列表（具有特定的 #id）
另一个 div 具有可编辑的 summernote 实例

我想创造什么

能够将列表中的资源拖到 summernote 编辑器中（也许使用 jquery UI 使其更漂亮？）
将资源放入编辑器后，它会自动以 certain/custom 方式设置样式（例如，使用 button-info 样式和资源的特定 #id）
一旦元素在编辑器中，我们就无法编辑该元素的文本（因此我们无法更改资源的标题），而是能够将整个元素拖动到编辑器中的其他任何位置（就像您一样）会用图像）。

这是基本的 fiddle，包含所有需要的基本代码：

// when edit
$('.edit').on('click', function() {
  var target = $(this).attr('target');




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


    ]
  });
});

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


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



});

.save {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-6">
  <div class="panel panel-default">
    <div class="panel-heading">Ressources</div>
    <div class="panel-body" style="max-height:200px;overflow:auto;">
      <div class="list-group modules" id="ressourcesList">

        <a href="#" class="list-group-item" id="1"> Resource 1
     </a>

        <a href="#" class="list-group-item" id="2"> Resource 2
     </a>

        <a href="#" class="list-group-item" id="3"> Another Resource
     </a>


      </div>

    </div>
  </div>

  <div class="row" id="module_info">
    <div class="panel panel-info">
      <div class="panel-heading">
        <div class="row">
          <div class="col-md-9 title_descr"></div>
          <div class="col-md-3 text-right">
            <button type="button" class="btn btn-info btn-sm edit" target="module_descr">Edit</button>
            <button type="button" class="btn btn-success btn-sm save" target="module_descr" style="display:none">Save</button>
          </div>
        </div>
      </div>
      <div class="panel-body" id="module_descr" module_id="">

      </div>
    </div>
  </div>

我尝试了 google 任何可能的搜索我非常感谢对此的任何帮助，

此致，

Xogno

Answer 1

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

在我哥哥的帮助下，我找到了一种方法来做我想做的事情。事实证明，通过为 summernote 创建自定义按钮的选项，该按钮不需要专门位于编辑器中。您可以使用 "node".

将任何内容添加到编辑器

fiddle 中的代码是使其工作的基本代码，但这里有一些功能：

有一个带 "add resource" 的按钮，可以将资源添加到编辑器（提取资源的 #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();

    },
});

这里是 fiddle 以查看实际代码： https://jsfiddle.net/Ltw7dsqr/5/

改进它的一种方法是在编辑器中使可折叠可移动，但我不知道如何实现。

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

Drag and drop external element to summernote editor with custom styling

jquery

drag-and-drop

summernote

我有什么

我想创造什么