tinymce富文本编辑器整合到django
第一步:定义表存图片路径
models.py
class AdminIMG(models.Model):
filename = models.CharField(max_length=200, blank=True, null=True)
img = models.ImageField(upload_to = './admin')
- H:\blog>python manage.py makemigrations
- Migrations for 'XYZblog':
- XYZblog\migrations\0002_auto_20170923_2018.py
- - Create model AdminIMG
- H:\blog>python manage.py migrate
- Operations to perform:
- Apply all migrations: XYZblog, admin, auth, contenttypes, sessions
- Running migrations:
- Applying XYZblog.0002_auto_20170923_2018... OK
第二步:定义视图,让图片直接显示在编辑框内
views.py
from .models import AdminIMG
def uploadIMG(request):
img = request.FILES.get('img')
adminIMG = AdminIMG()
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)
第三步:定义上传的目录
settings.py
- MEDIA_ROOT = os.path.join(BASE_DIR, 'static/upload/img')
第四步:定义url
urls.py
from django.views.static import serve
from blog.settings import MEDIA_ROOT
urlpatterns = [
url(r'uploadIMG/',views.uploadIMG,name='uploadIMG'),
url(r'^media/(?P<path>.*)$', serve, {'document_root': MEDIA_ROOT, }),
......
]
第五步:编辑\static\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="/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>';
- $('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');
- console.log(csrftoken);
- $('#my_form').append('<input type="hidden" name="csrfmiddlewaretoken" value='+csrftoken+' />');
- });
编辑器已有图片上传功能:
保存,查看数据库:
查看上传目录:
查看前台显示:
OK!
tinymce富文本编辑器整合到django的更多相关文章
- Vue CLI 3+tinymce 5富文本编辑器整合
基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...
- 15、Vue CLI 3+tinymce 5富文本编辑器整合
富文本编辑器里大佬们都说tinymce NB! 插件安装 inymce官方提供了一个vue的组件tinymce-vue 如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,懒的注册或者 ...
- vue中引入Tinymce富文本编辑器
最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件 ...
- 在 Vue 项目中引入 tinymce 富文本编辑器
项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...
- tinymce 富文本编辑器 编写资料
tinymce官方文档: 粘贴图片插件 博客搬运地址 使用Blob获取图片并二进制显示实例页面 tinymce自动调整插件 是时候掌握一个富文本编辑器了——TinyMCE(1) XMLHttpRequ ...
- Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)
tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...
- 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例
大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...
- HandyEditor 富文本编辑器整合到python flask项目中
1.下载HandyEditor,地址http://he.catfish-cms.com/ 2.解压后的文件名HandyEditor-master改为HandyEditor,文件夹里的文件如下 3.将H ...
- Django使用tinymce富文本编辑器
1 - 安装 pip install django-tinymce==2.6.0 2 - 注册app INSTALLED_APPS = ( ... 'tinymce', ) 3 - 在setting中 ...
随机推荐
- 29.1 collection层次结构 中的根接口
/* * Collection * boolean add(E e) * void clear() * boolean contains(Object o) * boolean isEmpty() * ...
- PHPStorm IDE 快捷键
⌘——Command ⌃ ——Control ⌥——Option/Alt ⇧——Shift ⇪——Caps Lock fn——功能键就是fn编辑 Command+alt+T 用 (if..else, ...
- python3(二十九) orderClass
""" """ __author__ = 'shaozhiqi' # Python的class中还有许多有特殊用途的函数,可以帮助我们定制类 ...
- slice使用了解
切片 什么是slice slice的创建使用 slice使用的一点规范 slice和数组的区别 slice的append是如何发生的 复制Slice和Map注意事项 什么是slice Go中的切片,是 ...
- java 代码执行cmd 返回值异常 (关于JAVA Project.waitfor()返回值是1)
关于JAVA Project.waitfor()返回值是1 0条评论 Project.waitfor()返回值是1,找了很久从网上没有发现关于1的说明. 这时对源代码调试了一下,发现Project ...
- JMock2入门
说明:学习JMock官网的Getting Started的笔记 例子:为测试publish/subscribe发布/订阅信息系统的publisher(发布者),mock subscriber(订阅者) ...
- mysql数据库深入学习
mysql 数据库 一.数据库介绍 1.关系型数据库的特点 二维表 典型产品Oracle传统企业,MySQL是互联网企业 数据存取是通过SQL 最大特点,数据安全性方面强(ACID) 2.NoSQ ...
- JS:document.documentElement对象的
document.documentElement.clientWidth 获取浏览器窗口文档显示区域的宽度,不包括滚动条. document.documentElement.clientHeight ...
- [linux] [nginx] 一键安装web环境全攻略phpstudy版,超详细!
找到运行中的服务器(实例). 打开这个主要是看它的IP,是公网ip,公网ip,公网ip,重要的事情说三遍. 接下来我们可以不用在阿里云上操作了,直接用客户端操作,这两个客户端就是Xshell 5和Xf ...
- 吃瓜的正确姿势,Python绘制罗志祥词云图
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 这篇文章中向大家介绍了Python绘制词云的方法,不难看出绘制词云可以说是一 ...