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

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. h ='<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" onchange="$(\'#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. });

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

保存,查看数据库:

查看上传目录:

查看前台显示:

OK!

tinymce富文本编辑器整合到django的更多相关文章

  1. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  2. 15、Vue CLI 3+tinymce 5富文本编辑器整合

    富文本编辑器里大佬们都说tinymce NB! 插件安装 inymce官方提供了一个vue的组件tinymce-vue 如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,懒的注册或者 ...

  3. vue中引入Tinymce富文本编辑器

    最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件 ...

  4. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  5. tinymce 富文本编辑器 编写资料

    tinymce官方文档: 粘贴图片插件 博客搬运地址 使用Blob获取图片并二进制显示实例页面 tinymce自动调整插件 是时候掌握一个富文本编辑器了——TinyMCE(1) XMLHttpRequ ...

  6. Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)

     tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...

  7. 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例

    大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...

  8. HandyEditor 富文本编辑器整合到python flask项目中

    1.下载HandyEditor,地址http://he.catfish-cms.com/ 2.解压后的文件名HandyEditor-master改为HandyEditor,文件夹里的文件如下 3.将H ...

  9. Django使用tinymce富文本编辑器

    1 - 安装 pip install django-tinymce==2.6.0 2 - 注册app INSTALLED_APPS = ( ... 'tinymce', ) 3 - 在setting中 ...

随机推荐

  1. "二号标题"组件:<h2> —— 快应用组件库H-UI

     <import name="h2" src="../Common/ui/h-ui/text/c_h2"></import> < ...

  2. Android电池信息获取

    Android 可以通过BroadcastReceiver来获取电池信息改变的广播(ACTION_BATTERY_CHANGED),从而获取到相关的电池信息. 电池信息,及其对应的相关常数(参考网址: ...

  3. Java读源码之ReentrantLock(2)

    前言 本文是 ReentrantLock 源码的第二篇,第一篇主要介绍了公平锁非公平锁正常的加锁解锁流程,虽然表达能力有限不知道有没有讲清楚,本着不太监的原则,本文填补下第一篇中挖的坑. Java读源 ...

  4. 常用vscode 插件第一季

    VSCODE 常用插件第一季 1.chinese 此插件中文(简体)语言包为 VS Code 提供本地化界面. https://marketplace.visualstudio.com/items?i ...

  5. E - Dungeon Master BFS

    [NWUACM] 你被困在一个三维的空间中,现在要寻找最短路径逃生!空间由立方体单位构成你每次向上下前后左右移动一个单位需要一分钟你不能对角线移动并且四周封闭是否存在逃出生天的可能性?如果存在,则需要 ...

  6. 带权值的图 BFS

    用bfs遍历最图求最短路径时通常借用优先队列即优先考虑最大的或者最小的权值 方法1 优先队列:(内置函数,优先考虑较小的权值) #include<iostream> #include< ...

  7. js拼接onclick方法字符串参数解决方法

    onclick = contentmap("'+useridarr[i]+'")

  8. vue2.x学习笔记(十二)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12592256.html. 组件基础 组件化是vue的一个重要特性,也是vue学习中非常重要的一个知识点. 基础示例 ...

  9. react-i8n

    1. 在项目中安装 npm install react-intl --save 2.兼容Safari各个版本需要安装intl npm install intl --save 3.编写语言包 1.)新建 ...

  10. IOC趣味理解

    假设一个场景:   假设你是一个四岁孩子,饿了,想吃东西.怎么做? 1,哪有吃的去哪拿,你知道冰箱有吃的,你去冰箱拿〉会有风险.比如,拿了生的吃的,吃坏肚子,甚至拿了不能吃的东西. 2, 找父母(IO ...