我有什么

我有资源的列表页面上的一个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 
 
\t \t \t \t \t </a> 
 

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

 
     <a href="#" class="list-group-item" id="3"> Another Resource 
 
\t \t \t \t \t </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>

我试图寻找对谷歌的任何possibleI会很感激的任何帮助，

最佳问候，

Xogno

答

发布答案以防情况可能有所帮助。

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

在小提琴的代码是基本代码，使其工作，但这里的特点：

有一个按钮，“添加资源”将资源添加到编辑器（提取＃资源的ID） - 它会增加一个可折叠的
，使用户不乱的一切行动），这要归功于“CONTENTEDITABLE =假”

一旦保存德文本，你，你不能编辑可折叠（可以移动可折叠的移动图标 - 可以使用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/

一个改善这将是使可折叠移动在编辑器的方式，但我不知道该怎么做到这一点。

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

我有什么

我想创建

相关推荐