欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

tinymce富文本编辑器整合到django

程序员文章站 2022-07-14 22:40:31
...

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

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.         "<script>top.$('.mce-btn.mce-open').parent().find('.mce-textbox').val('/media/%s').closest('.mce-window').find('.mce-primary').click();</script>" % 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<path>.*)$', 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. ='<iframe id="form_target" name="form_target" style="display:none"></iframe><form id="my_form" action="/temporary/uploadIMG/" target="form_target" method="post" enctype="multipart/form-data" style="width:0px;height:0;overflow:hidden"><input name="img" type="file" οnchange="$(\'#my_form\').submit();this.value=\'\';"></form>';
  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('<input type="hidden" name="csrfmiddlewaretoken" value='+csrftoken+' />');
  32. });

 

 

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

tinymce富文本编辑器整合到django

 

tinymce富文本编辑器整合到django

tinymce富文本编辑器整合到django

 

保存,查看数据库:

tinymce富文本编辑器整合到django

 

查看上传目录:

tinymce富文本编辑器整合到django

 

查看前台显示:

tinymce富文本编辑器整合到django

 

OK!