나는 이것을하기 위해 모든 노력을 기울였습니다.외부 요소를 summernote 편집기로 사용자 정의 스타일로 드래그 앤 드롭

내가 무엇을 가지고

나는
편집 가능한 summernote 인스턴스가 다른 사업부 (특정 #ID와 함께) 자원의 목록 페이지에 사업부를

내가

리소스를 목록에서 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>

내가 어떤입니다 가능한이 어떤 도움을 주셔서 감사합니다 정말 것이다 구글에서 검색을 시도 :

여기에 필요한 모든 기본적인 코드로 기본 바이올린의 감사합니다,

Xogno

출처

2017-05-18 Xogno

누군가에게 도움이 될 수 있도록 답변을 게시하십시오.

동생의 도움으로 나는 내가 원하는 것을 정확하게 할 수있는 길을 발견했습니다. summernote에 대한 사용자 지정 단추를 만드는 옵션을 사용하면 단추가 편집기에 구체적으로있을 필요는 없습니다. "노드"를 사용하여 편집 내용에 컨텐츠를 추가 할 수 있습니다.

바이올린의 코드가 작동 할 수있는 기본 코드이지만, 여기에 기능은 다음과 같습니다

이 버튼 편집기에 자원을 추가 할 것 "리소스를 추가"로있다

합니다 (#를 추출 자원의 아이디) -이 추가됩니다 사용자가 엉망이 모든 것을까지), "거짓의 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/

한 가지 방법은,하지만 난 방법을 모르는 가능하게하십시오.

출처

2017-05-22 08:44:01 Xogno

외부 요소를 summernote 편집기로 사용자 정의 스타일로 드래그 앤 드롭

내가 무엇을 가지고

내가

답변

관련 문제