django admin后台接入tinymce并且支持图片上传

Posted 菲菲菲菲菲常新的新手

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了django admin后台接入tinymce并且支持图片上传相关的知识,希望对你有一定的参考价值。

首先:下载tinymce

地址是https://www.tinymce.com/

点击download

下载社区版本即可

接着:把压缩包内tinymce目录内的所有文件和文件夹复制到Django项目中static/js目录内:

然后编辑admin文件

class BlogAdmin(admin.ModelAdmin):
    list_display = ("title", "author", "category", "public_time", "votes")
    search_fields = ("title", "author", "category")
    list_filter = ("public_time", "votes")
    ordering = ("-public_time",)

    class Media:
        js = (
            /static/js/jquery-3.2.1.min.js,
            /static/js/tinymce/js/tinymce/tinymce.min.js,
            /static/js/tinymce/js/tinymce/jquery.tinymce.min.js,
            /static/js/tinymce/js/tinymce/textareas.js
        )
admin.site.register(Blog, BlogAdmin)
 

紧接着在/static/js/tinymce/js/tinymce目录下新建一个textareas.js文件

tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: ["image"],
    image_advtab: true,
    paste_data_images: true,
    file_browser_callback: function(field_name, url, type, win){
        if(type==image){
            $(#my_form input).click();
        };
    },
})

$( document ).ready(function() {
h =<iframe id="form_target" name="form_target" style="display:none"></iframe><form id="my_form" action="/uploadImg/" target="form_target" method="post" enctype="multipart/form-data" style="width:0px;height:0;overflow:hidden"><input name="img" type="file" onchange="$(\‘#my_form\‘).submit();this.value=\‘\‘;"></form>;
$(body).append(h);
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != ‘‘) {
var cookies = document.cookie.split(;);
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + =)) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie(csrftoken);
$(#my_form).append(<input type="hidden" name="csrfmiddlewaretoken" value=+csrftoken+ />);
});

此时已经集成了tinymce编辑器了,但是文件上传功能还没结束

现在要创建一个model用来存放文件,一个url和视图函数来处理图片上传,以及在setting中配置

先一个个来,首先配置setting中的MEDIA_ROOT

MEDIA_URL = /media/
MEDIA_ROOT = os.path.join(BASE_DIR, media)

接着编辑models文件

class BlogPic(models.Model):
    filename = models.CharField(max_length=200, blank=True, null=True)
    img = models.ImageField(upload_to=./media)

python manage.py makemigrations

python manage.py migrate

建立对应的数据库

然后就是urls文件,添加上传文件url

from blog.views import uploadImg

urlpatterns = [
    url(ruploadImg, uploadImg, name=uploadImg),
    url(r^media/(?P<path>.*)$, serve, {document_root: MEDIA_ROOT}),
]

最后编辑views视图函数

def uploadImg(request):
    img = request.FILES.get(img)
    adminImg = BlogPic()
    adminImg.filename = img.name
    adminImg.img = img
    adminImg.save()
    return HttpResponse("<script>top.$(‘.mce-btn.mce-open‘).parent().find(‘.mce-textbox‘).val(‘/media/%s‘)"
                        ".closest(‘.mce-window‘).find(‘.mce-primary‘).click();</script>" %adminImg.img)

完成这些步骤之后就已经集成了tinymce,并且支持图片上传了

参考文献

http://blog.csdn.net/hjxzt1/article/details/78073596

http://blog.csdn.net/hjxzt1/article/details/78068972

以上是关于django admin后台接入tinymce并且支持图片上传的主要内容,如果未能解决你的问题,请参考以下文章

Django集成TinyMCE(admin后台+前台)

Django注意知识点

django后台集成富文本编辑器Tinymce的使用

Django Admin后台管理

Django-富文本的使用

django后台密码错误