2

我正在使用 Django 和 Bootrap 2.32。我想包括这个以所见即所得为主题的文本编辑器：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表单域内工作？使用上述小部件，创建的文本区域无法通过所见即所得的编辑器控制按钮进行控制。像这样包装表单模板标签

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

也不行。因此，问题是 Django 创建了一个textarea，而编辑器需要 a<div>才能正确呈现。你们知道如何让它工作（不参考 django-wysiwyg）。

谢谢！

4

4 回答 4

2

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

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

于 2013-09-21T04:48:15.317 回答
2

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

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

2) 表单 onsubmit 事件将在提交之前将当前 div 内容反向复制到 textarea

$('#textarea').val($('#editor').html())
于 2013-08-12T17:17:05.700 回答
0

你确定这个“插件”不能用textarea吗？

{{ Article_Form.Article_text }}

将呈现为：

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

因此，您有机会像这样初始化所见即所得的编辑器：

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

然而，在检查了插件之后，我怀疑这是可能的，因为它使用contenteditable="true"的是 HTML5 的属性，并且可能插件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 。

希望能帮助到你。

于 2013-08-11T23:04:46.603 回答
0

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

于 2013-08-27T17:18:07.163 回答