我拥有什么

Question

我一直在试图做这件事。但是我一直在为自己做好准备。

我拥有什么

我在页面上有一个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

Answer 1

发布答案，以防有人帮助。

在我哥哥的帮助下，我找到了一种方法来完全按照我的意愿行事。事实证明，通过为summernote创建自定义按钮的选项，该按钮不需要特别在编辑器中。您可以使用＆＃34;节点＆＃34;。

将任何内容添加到edito

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

有一个按钮，其中包含＆＃34;添加资源＆＃34;这将把资源添加到编辑器（提取资源的#id） - 它将添加一个可折叠的
你无法编辑可折叠的内容（这样用户就不会搞砸所有内容），这要归功于＆＃34; contentEditable = false＆＃34;

一旦你保存了de text，你可以移动可折叠的感谢移动图标 - 通过 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();

    },
});

这里是查看代码实际操作的小提琴： https://jsfiddle.net/Ltw7dsqr/5/

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

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

我拥有什么

我想要创建

1 个答案: