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

我找到了两种方法来实现这一目标。

首先是根模板文件夹中的新/api，复制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需要首先是init。

你编码不起作用的原因是：

$summernote.summernote

summernote代码在你的自定义js之后呈现，所以第二种方法是如果你将js延迟5秒，那么你的自定义是在summernote代码之后运行的，如：

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

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

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

1 个答案: