Django-CKEditor与普通Django表单和Bootstrap一起使用

Question

我刚接触Django和CKEditor，过去一周一直在努力把Django-CKEditor集成到表单中。它在Django的管理后台表单中运行得很好，但在普通表单中却不行。

这是我的forms.py文件

class ArticleForm(forms.ModelForm):
    content = forms.CharField(widget = CKEditorWidget())    

    class Meta:
        model = Article
        fields = ['title','content','meta_description','meta_tags']

这是models.py文件

class Article(models.Model):
    title = models.CharField(max_length=500)
    url = models.CharField(max_length=500)
    date = models.DateTimeField(auto_now_add=True, blank=True)
    author = models.CharField(max_length=100)
    content = models.TextField()
    meta_description = models.TextField()
    meta_tags = models.TextField()
    is_published = models.BooleanField(default=False)

这是views文件

def new_post(request):
    if request.method == 'POST':
        form = ArticleForm(request.POST)
        if form.is_valid():
            article = form.save(commit=False)
            article.url =  form.data['title']
            article.save()
            return HttpResponse('/thanks/')
    else:
        form = ArticleForm()
    return render(request, 'blog/new-post.html', {'form': form})

为了验证它在管理后台是否有效，我在管理表单中进行了测试。

这是admin.py文件

class ArticleAdminForm(forms.ModelForm):
    content = forms.CharField(widget=CKEditorWidget())

    class Meta:
        model = Article

class ArticleAdmin(admin.ModelAdmin):
    form = ArticleAdminForm


admin.site.register(Article, ArticleAdmin)

还有一件事，我在使用bootstrap3，模板看起来是这样的

<form class="form-horizontal" action="/blog/new-post/" method="post" >{% csrf_token %}
            <fieldset>
              <legend>New Blog Post</legend>
                {{ form.non_field_errors }}
                <div class="fieldWrapper form-group">
                    {{ form.title.errors }}
                    <label class="col-lg-2 control-label" for="id_title">Title</label>
                    <div class="controls col-lg-10 ">
                      <input type="text" class="col-lg-10 form-control" name="title" id="id_title}}" placeholder="Title">
                    </div>
                </div>
                <div class="fieldWrapper form-group">
                    {{ form.content.errors }}
                    <label class="col-lg-2 control-label" for="id_content">Content</label>
                    <div class="controls col-lg-10 ">
                      <textarea class="col-lg-10 form-control" rows="17"name="content" id="id_content}}" placeholder="Content"></textarea>
                    </div>
                </div>
                <div class="fieldWrapper form-group">
                    {{ form.meta_description.errors }}
                    <label class="col-lg-2 control-label" for="id_meta_description">Description</label>
                    <div class="controls col-lg-10 ">
                      <textarea class="col-lg-10 form-control" rows="5"name="meta_description" id="id_meta_description}}" placeholder="Short description about this article."></textarea>
                    </div>
                </div>
                <div class="fieldWrapper form-group">
                    {{ form.meta_tags.errors }}
                    <label class="col-lg-2 control-label" for="id_meta_tags">Tags</label>
                    <div class="controls col-lg-10 ">
                      <input type="text" class="col-lg-10 form-control" name="meta_tags" id="id_meta_tags}}" placeholder="Comma separated tags eg. trekking, hiking ">
                    </div>
                </div>

              <input type="submit" value="Publish"  class="btn btn-default btn-large pull-right">
            </fieldset>
          </form>

如果能得到任何帮助，那就太好了。提前谢谢你们！

Answer 1

试着把这个脚本放在你模板的底部。

<script>
    $(function () {
        CKEDITOR.replace('id_content', {
            toolbar: 'Basic'
        });
    });
</script>

当你从管理界面使用共同编辑器（我猜是通过suit-ckeditor）时，其实你是在隐式地使用这个渲染函数来处理你的文本区域小部件：

def render(self, name, value, attrs=None):
    output = super(CKEditorWidget, self).render(name, value, attrs)
    output += mark_safe(
        '<script type="text/javascript">CKEDITOR.replace("%s", %s);</script>'
        % (name, json.dumps(self.editor_options)))
    return output

这个函数基本上做的工作是一样的。

Answer 2

我也遇到过同样的问题。
我选择在普通表单中使用django-tinymce，而在管理页面中使用ckeditor。

这是我的forms.py文件：

from tinymce.widgets import TinyMCE
from django import forms
from .models import Article
class ArticleForm(forms.ModelForm):
    content = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}))
    class Meta:
        model = Article
        fields = ('content',)

希望这对你有帮助。

Answer 3

你很可能忘记了 {{form.media}}，请把你的HTML修改成下面这样：

<form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        {{form.media}}
        {{form.as_p}}
    <button type="submit" name='mybtn'>Submit</button>
      </form>

Answer 4

我觉得你在models.py文件里漏掉了这一行：from ckeditor.fields import RichTextField

把这行代码：content = models.TextField()

改成：content = RichTextField(blank=True, null=True)

Answer 5

当你在管理面板外使用ckeditor时，你需要包含或导入一些表单的媒体文件，这样它才能正常工作。在Django管理面板外使用的方法。

假设你的forms.py文件是这样的：

from ckeditor.widgets import CKEditorWidget

class ArticleForm(forms.Form):
    content = forms.CharField(widget = CKEditorWidget())

你的模板文件：

<form>
{{ article_form }}
</form>

然后加载表单的媒体文件：

{% load static %}
<script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>