首页 > 解决方案 > 在 Django 中上传使用 Tiny MCE 编写的内容时出现问题

问题描述

我在博客网站中使用 Tiny MCE 作为富文本编辑器。但是当我尝试使用 TinyMCE 写文章时,我的帖子没有被上传,但在我使用普通文本编辑器时被上传。我没有从谷歌得到合适的答案。出现错误提示“content.css”丢失,而我的静态文件夹中没有任何此类 CSS。我的代码:

模型.py:

class Post(models.Model):
    title = models.CharField(max_length=100)
    cover = models.ImageField(upload_to='Blog Image')
    content = models.TextField()

表格.py:

class PostForm(ModelForm):
    class Meta:
        model = Post
        fields = '__all__'
    class Media:
        js = ('js/tinyInject.js',)
    def __init__(self, *args, **kwargs):
        super(PostForm, self).__init__(*args, **kwargs)
        self.fields['content'].widget.attrs = {'class': 'form-control', 'id': 'id_content'}

tinyInject.js

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js";
document.head.appendChild(script);
script.onload = function () {
    tinymce.init({
        selector: '#id_content',
        width: 1200,
        height: 300,
        plugins: [
            'advlist autolink link image lists charmap print preview hr anchor pagebreak',
            'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
            'table emoticons template paste help'
        ],
        toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
            'bullist numlist outdent indent | link image | print preview media fullpage | ' +
            'forecolor backcolor emoticons | help',
        menu: {
            favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
        },
        menubar: 'favs file edit view insert format tools table help',
        content_css: 'css/content.css'
    });
}

视图.py

def writewithus(request):
    form = PostForm()
    if request.method == "POST":
        form = PostForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            if form.save():
                return redirect('/')
        else:
            print(form.errors)
    context = {'form': form}
    return render(request, 'Blog/writewithus.html', context)

writewithus.html

<form class="" method="POST" enctype="multipart/form-data">
          {% csrf_token %}
          {{ form.management_form }}
          <div class="form-group">
            <label>Label</label>
            {{form.blogType}}
          </div>
          <hr>
          <div class="form-group">
            <label>Title</label>
            {{form.title}}
          </div>
          <hr>
          <div class="form-group">
            <label>Cover Photo</label>
            {{form.cover}}
          </div>
          <hr>
          <label>Content</label>
          <div class="form-group">
            {{ form.media }}
            {{form.content}}
          </div>          
          <hr>
          <br>
          <button type="submit" class="btn btn-dark mt-3">Send</button>
        </form>

终端中显示一个错误,提示缺少“content.css”。我的静态文件夹中没有这样的 CSS。

标签: javadjangodjango-formstinymcerich-text-editor

解决方案


您的 TinyMCE 配置明确告诉编辑器加载 CSS:

content_css: 'css/content.css'

如果你没有这样的 CSS 会导致错误。如果您只是删除该行 TinyMCE 将不会查找该 CSS 文件。


推荐阅读