Django-summernote 위젯의 요소에 대한 사용자 정의 javascript가 작동하지 않습니까?

Question

django-summernote 응용 프로그램에 몇 가지 문제가 있습니다.

위젯의 툴바에는 버튼 (.btn-fullscreen)이 있습니다. 사용자가이 버튼을 클릭하면 일부 블록을 변경하고 싶기 때문에 자바 스크립트를 추가하지만 불행히도 작동하지 않습니다.

$(".note-toolbar").on("click", ".btn-fullscreen", function() { 
    // Some code 
    console.log('CLICK'); <!-- Dont work 
}); 

$(".btn-fullscreen").click(function(){ 
    // Some code 
    console.log('CLICK'); <!-- Dont work 
} 

이 문제는 위젯 요소와 접촉하려고 할 때만 발생합니다. 위젯 외부의 요소에는 문제가 없습니다. 이 이상한 행동의 이유는 무엇입니까?

CSS :

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.css"> {# Codemirror CSS #} 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/theme/monokai.css"> {# Monokai CSS #} 
<link rel="stylesheet" type="text/css" href="{% static "summernote/summernote.css" %}"> {# Summernote CSS #} 
<link rel="stylesheet" type="text/css" href="{% static "summernote/django_summernote.css" %}"> {# Django-Summernote CSS #} 

JS :

이 내가 정적 파일을로드하는 방법입니다

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/mode/xml/xml.js"></script> 

<script src="{% static 'summernote/jquery.ui.widget.js'%}"></script> 
<script src="{% static 'summernote/jquery.iframe-transport.js'%}"></script> 
<script src="{% static 'summernote/jquery.fileupload.js'%}"></script> 
<script src="{% static 'summernote/summernote.min.js'%}"></script> 
<script src="{% static 'summernote/ResizeSensor.js'%}"></script> 

<script type="text/javascript"> 
$(".note-toolbar").on("click", ".btn-fullscreen", function() { 
    // Some code 
}); 

$(".btn-fullscreen").click(function(){ 
    // Some code 
} 
</script> 

Answer 1

내가 이것을 archieve하는 두 가지 방법을 찾을 수 있습니다.

먼저 루트 템플릿 폴더에 django_summernote/widget_inplace.html 새로운, site-packages/django_summernote/templates/django_summernote/widget_inplace.html의 코드를 복사 summernote 처음 init을 할 필요가 있기 때문에

{% load staticfiles %} 
<div id='{{ id_src }}'>{{ value|safe }}</div> 
<script> 
$(function() { 
    var {{ id }}_textarea = window.document.getElementById('{{ id_src }}-textarea'); 
    var {{ id }}_src = window.document.getElementById('{{ id_src }}'); 
    var {{ id }}_settings = {{ settings|safe }}; 
    var csrftoken = getCookie('{{ CSRF_COOKIE_NAME }}'); 

    // include summernote language pack, synchronously 
    if({{ id }}_settings.lang != 'en-US') { 
     $.ajaxSetup({async:false}); 
     $.getScript('{{ STATIC_URL }}django_summernote/lang/summernote-' + {{ id }}_settings.lang + '.min.js'); 
     $.ajaxSetup({async:true}); 
    } 

    $({{ id }}_textarea).hide(); 

    $summernote = $({{ id }}_src); 
    $summernote.summernote($.extend({{ id }}_settings, { 
     callbacks: { 
      onInit: function() { 
       var nEditor = $('.note-editor'); 
       var nToolbar = $('.note-toolbar'); 
       var nEditable = $('.note-editable'); 
       var nStatusbar = $('.note-statusbar'); 
       var setHeight = parseInt({{ id }}_settings.height) // default 
         - nToolbar.outerHeight() // toolbar height including margin,border,padding 
         - (nEditable.innerHeight() - nEditable.height()) // editable's padding 
         - (nEditor.outerHeight() - nEditor.innerHeight()) // editor's border 
         - nStatusbar.outerHeight(); // status bar height 

       nEditable.height(setHeight); 
      }, 
      onBlur: function() { 
       {{ id }}_textarea.value = $(this).summernote('code'); 
      }, 
      {% if not disable_upload %} 
      onImageUpload: function(files) { 
       var imageInput = $('.note-image-input'); 
       var sn = $(this); 
       // custom attachment data 
       var attachmentData = {{ id }}_textarea.dataset; 
       imageInput.fileupload(); 
       var jqXHR = imageInput.fileupload('send', 
        { 
         files: files, 
         formData: $.extend({csrfmiddlewaretoken: csrftoken}, attachmentData), 
         url: {{ id }}_settings.url.upload_attachment, 
        }) 
        .success(function (result, textStatus, jqXHR) { 
         data = $.parseJSON(result); 
         $.each(data.files, function (index, file) { 
          sn.summernote("insertImage", file.url); 
         }); 
        }) 
        .error(function (jqXHR, textStatus, errorThrown) { 
         // if the error message from the server has any text in it, show it 
         var msg = jqXHR.responseText; 
         if (msg.length > 0) { 
          alert('Got an error uploading an image: ' + msg); 
         } 
         // otherwise, show something generic 
         else { 
          alert('Got an error while uploading images.'); 
         } 
        }); 
      } 
      {% endif %} 
     } 
    })); 

    //-------YOUR CODE IN HERE------------------ 

    // See https://docs.djangoproject.com/en/dev/ref/contrib/csrf/#ajax 
    function getCookie(name) { 
     var cookieValue = null; 
     if (document.cookie && document.cookie != '') { 
      var cookies = document.cookie.split(';'); 
      for (var i = 0; i < cookies.length; i++) { 
       var cookie = jQuery.trim(cookies[i]); 
       // Does this cookie string begin with the name we want? 
       if (cookie.substring(0, name.length + 1) == (name + '=')) { 
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
        break; 
       } 
      } 
     } 
     return cookieValue; 
    } 
}); 
</script> 

가, 나중에 $summernote.summernote보다 당신에게 자신의 스크립트 코드를 추가합니다. 당신이 코드가 작동하지 않는 이유

---

그리고 그 이유는이 때문에 :

onBlur: function() { 
     {{ id }}_textarea.value = $(this).summernote('code'); 
    }, 

summernote 코드는 두 번째 방법은 그래서 당신이 5에 대한 귀하의 js를 지연하는 경우, 사용자 정의 JS 후 렌더링

setTimeout(function() { 
    $(".btn-fullscreen").click(function() { 
     console.log("GG"); 
    }); 
}, 5000); 

이 너무 작동하고 recommend.5 초, 당신은 당신이 자신에 최선의 지연을 테스트해야 할 변화 1 또는 2가 될 수있다 : summernote 코드가 같은 inited는 이후 초, 다음 사용자가 실행됩니다.