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

Posted 2023-03-22

【中文标题】使用自定义样式将外部元素拖放到summernote编辑器

【英文标题】：Drag and drop external element to summernote editor with custom styling

【发布时间】：2017-10-18 05:06:09

【问题描述】：

我一直在努力尝试这样做。

我有什么

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

我想创造什么

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

这是包含所有所需基本代码的基本小提琴：

// 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>

我尝试在谷歌上搜索任何可能的东西我非常感谢任何帮助，

最好的问候，

Xogno

【参考方案1】：

发布答案以防它可能对某人有所帮助。

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

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

有一个带有“添加资源”的按钮，可以将资源添加到编辑器（提取资源的#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-></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-></div>').insertAfter(ui.placeholder);
        );

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

    ,
);

这是查看实际代码的关键： https://jsfiddle.net/Ltw7dsqr/5/

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