自定义 javascript 到 django-summernote 小部件的元素不起作用？

Question

django-summernote 应用程序有一些问题。

在小部件的工具栏中，我有按钮 (.btn-fullscreen)。当用户单击此按钮时，我想更改一些块，所以我添加了 javascript，但不幸的是它不起作用。

$(".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

我已经找到了两种归档方式。

首先是根模板文件夹中的新django_summernote/widget_inplace.html，复制site-packages/django_summernote/templates/django_summernote/widget_inplace.html中的代码：

{% 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之后添加你自己的脚本代码，因为summernote需要先初始化。

---

而你的代码不起作用的原因是因为：

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

summernote 代码在你的自定义 js 之后渲染，所以第二种方法是如果你延迟你的 js 5 秒，那么你的自定义在 Summernote 代码启动后运行，如下所示：

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

这也有效，推荐。5 秒可以更改 1 或 2，您需要自己测试最佳延迟。