分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

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

发布时间:2023-09-06 01:40责任编辑:熊小新关键词:django

首先:下载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 uploadImgurlpatterns = [ ???url(r‘uploadImg‘, 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并且支持图片上传

原文地址:https://www.cnblogs.com/lgh344902118/p/8378021.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved