带有普通 Django 表单和引导程序的 Django-CKEditor

Posted 2023-02-24

【中文标题】带有普通 Django 表单和引导程序的 Django-CKEditor

【英文标题】：Django-CKEditor with normal Django Forms and bootstrap

【发布时间】：2014-09-20 12:25:33

【问题描述】：

我是 Django 和 CKEditor 的新手，过去 1 周一直在努力将 Django-CKEditor 集成到表单中。它在 Django Admin 表单中运行良好，但在普通表单中无法正常运行。

这是我的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)

观看次数

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 中工作，我通过在 admin 表单中添加它来使用 Admin 进行测试。

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>

任何帮助都会很棒。提前致谢

【参考方案1】：

我认为您错过了 models.py

中的 from ckeditor.fields import RichTextField 行

更改content = models.TextField()

转入content = RichTextField(blank=True, null=True)

【参考方案2】：

在管理面板之外渲染 ckeditor 时，您必须包含/导入表单媒体才能使其工作。 Rendering outside of django admin.

假设你的 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>

【参考方案3】：

我遇到了同样的问题。 我宁愿将 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',)

希望这会有所帮助。

【参考方案4】：

尝试在模板底部添加此脚本

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

当您从管理界面使用 coeditor（我猜是通过 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

基本上做同样的工作。

【参考方案5】：

您很可能错过了 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>