Question

我正在使用Django和Bootrap 2.32。我想要包含这个以wysiwyg-bootrap为主题的文本编辑器：http://mindmup.github.io/bootstrap-wysiwyg/。这个编辑器的用法非常简单，包括

$('#editor').wysiwyg();

JS声明中的

将呈现每个

<div class=editor></div>

成为一个美丽的所见即所得的文本编辑器。

现在问题：我想将这个编辑器包含在我的django表单字段中。我有单一的形式：

class Article_Form(ModelForm):
    Article_text = CharField(widget=Textarea(attrs = {'id' : 'editor'}))
    class Meta:
        model= Article

，而Article模型包含一个简单的CharField。有没有机会让编辑器在Article_text表单字段中工作？使用上述小部件，所创建的文本区域不能由所见即所得的控制按钮控制。像这样包装form-template-tag

<div id="editor">
    {{ Article_Form.Article_text }}                                
</div>

也不起作用。因此问题是Django创建了一个textarea，编辑器需要<div>才能正确呈现。你们有任何想法如何让它工作（没有参考django-wysiwyg）。

谢谢！

Answer 1

我对Django不太了解，但是我写了你所指的编辑器，所以这是一个建议。假设此页面上的其他答案是正确的，并且您无法直接生成div，则可以使用通常执行的任何Django模板生成文本区域，然后分配两个事件： 1）页面onload事件，它将textarea内容复制到div中，类似于

$('#editor').html($('#textarea').val())

2）表单onsubmit事件，它会在提交之前将当前div内容反向复制到textarea中

$('#textarea').val($('#editor').html())

Answer 2

看看这个。 Summernote是一个基于Twitter的Bootstrap的简单WYSIWYG编辑器。 django-summernote插件允许您将Summernote嵌入Django管理页面非常方便。

https://github.com/lqez/django-summernote

Answer 3

您确定此“插件”不适用于textarea吗？

{{ Article_Form.Article_text }}

将呈现为：

<textarea cols="40" id="id_Article_text" name="Article_text" rows="10"></textarea>

因此，您可以初始化wysiwyg编辑器，如：

$('#id_Article_text').wysiwyg();

然而，在检查插件后，我怀疑这是可能的，因为它使用了HTML5的contenteditable="true"属性，并且该插件可能仅适用于div。

所以你无法用Django形式使它本地工作。解决方案应该是手动显示表单的其他字段，使用textarea隐藏该字段并显示编辑器：

<form action="" method="POST">

    {{ Article_Form.field1 }}
    {{ Article_Form.field2 }}

    <div class=editor></div>

    {% csrf_token %}
    <input type="submit" value="Submit" id="submit-btn" />
</form>

然后您可以使用JS提交表单：

$('#submit-btn').click(function (e) {
    e.preventDefault();

    $.ajax({
        // do your magic here. 
        // note that you can get the content of the editor with: $('#editor').cleanHtml();
    })
});

这种方式是hackish我同意所以我不建议你去，只是找到其他插件。另请仔细阅读PEP 8。

希望它有所帮助。

Answer 4

看一下这个回购：https://github.com/rochapps/django-secure-input 我认为它解决了你的大部分问题。

在Django Form中使用Bootstrap wysiwyg文本编辑器

4 个答案: