首先:下载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(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