在django中编辑富文本编辑器小部件

时间:2018-06-05 10:57:19

标签: javascript jquery html django rich-text-editor

我正在使用django-summernotelink)和crispy-forms这样:

  

forms.py

class SomeForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        super(EventSettingsForm, self).__init__(*args,**kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'POST'
        #self.helper.form_action = reverse_lazy('simpleuser')
        self.helper.add_input(Submit('submit', 'Submit', css_class='btn-success'))

        #self.helper.form_class = 'form-inline'
        self.helper.layout = Layout(
            Div(
                'person',
                ),
            Div(
                'text',
                )
            )

    class Meta():

        model = SomeModel
        exclude = (....)
        widgets ={
        'text': SummernoteWidget,
        }

我有一个base.html作为基本模板,test.html就像这样:

  

base.html文件

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <title>App</title>
        {% block scripts-head %}
        <link href =  "{% static 'css/bootstrap.css' %}" rel ="stylesheet">
        <link href =  "{% static 'css/summernote-bs4.css' %}" rel ="stylesheet">
        {% endblock %}
    </head>
    <body>
        <div class="mx-auto center-block w-50 p-3">
        {% block content %}

        {% endblock %}
        </div>
    {% block scripts %} 
    <script src = "{% static 'js/jquery-3.2.1.js' %}"></script>
    <script src = "{% static 'js/bootstrap.js' %}"></script>
    {% endblock %}
    </body>
</html>
  

最后是test.html

{%extends 'base.html'%}
{% load static %}


{% block scripts-head %}
{{ block.super }}
{% endblock %}


{% block content %}

{% load crispy_forms_tags %}
{% crispy form %}

{% endblock %}




{% block scripts %}
{{ block.super }}
{% endblock %}

当有人粘贴一些文本时,我需要更改SummernoteWidget的行为 - 我希望onPaste函数只传输文本,而不是样式。它在THIS答案中得到了完美的解释,HERE是一个有效的jsfiddle。

我无法弄清楚如何在我的情况下实现该snipplet。把它放在哪里,将test.html更改为以下内容似乎是合乎逻辑的:

{%extends 'base.html'%}
{% load static %}


{% block scripts-head %}
{{ block.super }}
{% endblock %}


{% block content %}

{% load crispy_forms_tags %}
{% crispy form %}

{% endblock %}




{% block scripts %}
{{ block.super }}
<script>
$(document).ready(function () {
    $('#summernote').summernote({
        onPaste: function (e) {
            var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
            e.preventDefault();
            document.execCommand('insertText', false, bufferText);
        }
    });
});
</script>
{% endblock %}

但这不起作用。

它一定是我不理解的东西,所以任何解释对我来说都是金色的。谢谢!

修改:以下是{% crispy form %}关于我们感兴趣的div的输出:

    <div> <div id="div_id_text" class="form-group"> <label for="id_text" class="col-form-label  requiredField">
                Event text<span class="asteriskField">*</span> </label> <div class=""> <textarea name="text" cols="40" rows="10" class="summernotewidget form-control" required id="id_text" hidden="true">
</textarea><script>
var settings_id_text = {some settings here};
</script>
<iframe id="id_text_iframe" src="/summernote/editor/id_text/" frameborder="0"  required width="720" height="480"></iframe> </div> </div> </div>
  

更新:

我设法使用this插件来解决问题,但我想完全了解如何自己完成。

0 个答案:

没有答案