Django在admin后台集成TinyMCE富文本编辑器添加上传图片功能

博客网站怎么能少了图片，为TinyMCE编辑器添加上传图片功能。

 

第一步：定义表存图片路径

models.py

1. class AdminIMG(models.Model):
2.     filename = models.CharField(max_length=200, blank=True, null=True)
3.     img  = models.ImageField(upload_to = './admin')

1. H:\blog>python manage.py makemigrations
2. Migrations for 'XYZblog':
3.   XYZblog\migrations\0002_auto_20170923_2018.py
4.     - Create model AdminIMG
5. H:\blog>python manage.py migrate
6. Operations to perform:
7.   Apply all migrations: XYZblog, admin, auth, contenttypes, sessions
8. Running migrations:
9.   Applying XYZblog.0002_auto_20170923_2018... OK

 

第二步：定义视图，让图片直接显示在编辑框内

views.py

1. from .models import AdminIMG
2. def uploadIMG(request):
3.     img = request.FILES.get('img')
4.     adminIMG = AdminIMG()
5.     adminIMG.filename = img.name
6.     adminIMG.img = img
7.     adminIMG.save()
8.     return HttpResponse(
9.         "" % adminIMG.img)

 


第三步：定义上传的目录

settings.py

 


1. MEDIA_ROOT = os.path.join(BASE_DIR, 'static/upload/img')

 

第四步：定义url

urls.py

1. from django.views.static import serve
2. from blog.settings import MEDIA_ROOT
3. urlpatterns = [
4.     url(r'uploadIMG/',views.uploadIMG,name='uploadIMG'),
5.     url(r'^media/(?P.*)$', serve, {'document_root': MEDIA_ROOT, }),
6.     ......
7. ]

 


 


 第五步：编辑\static\js\tinymce\textareas.js


1. tinymce.init({
2. selector: 'textarea',
3. theme : "modern",
4. plugins: ["image"],
5. image_advtab: true,
6. paste_data_images:true,
7. file_browser_callback: function(field_name, url, type, win) {
8. if(type=='image') $('#my_form input').click();
9. },
10. });
11. $( document ).ready(function() {
12. h ='
    ';
13. $('body').append(h);
14. function getCookie(name) {
15. var cookieValue = null;
16. if (document.cookie && document.cookie != '') {
17. var cookies = document.cookie.split(';');
18. for (var i = 0; i < cookies.length; i++) {
19. var cookie = jQuery.trim(cookies[i]);
20. // Does this cookie string begin with the name we want?
21. if (cookie.substring(0, name.length + 1) == (name + '=')) {
22. cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
23. break;
24. }
25. }
26. }
27. return cookieValue;
28. }
29. var csrftoken = getCookie('csrftoken');
30. console.log(csrftoken);
31. $('#my_form').append('');
32. });

 

编辑器已有图片上传功能：

保存，查看数据库：

查看上传目录：

查看前台显示：

OK！