django2集成DjangoUeditor富文本编辑器
富文本编辑器,在web开发中可以说是不可缺少的。django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一些功能如文件上传、在后台和前台一起使用等,非常方便。
一、下载DjangoUeditor:
1.python3: https://github.com/twz915/DjangoUeditor3/ (直接下载zip)
2.python2:https://github.com/zhangfisher/DjangoUeditor(直接下载zip,或 pip install DjangoUeditor)
二、 新建django项目:
1. 在项目的根目录新建extra_apps文件夹并将我们下载好的zip文件解压打开后找到 DjangoUeditor将DjangoUeditor直接拷贝到我们项目的extra_apps中,如下:
2.在settings.py文件中添加两行代码:如下
sys.path.insert(0, os.path.join(BASE_DIR, 'apps'))
sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps'))
3.通过pycharm 选中extra_apps文件夹点击鼠标右键选中菜单mark directory as 选择 sources root 就可以变成上面的蓝色文件夹目录就可以了。
变成蓝色文件夹后就可以在settings.py 的INSTALLED_APPS中引入DjangoUeditor
4.通过以上三步就将基本的集成工作就完成了,下面就可以开始使用了。
4.1 在的urls.py中添加ueditor:
4.2 django后台使用ueditor,在我们的项目中通过django命令(djang-admin startapp blog)创建一 个 app叫blog,注意需要在settings.py的INSTALLED_APPS中添加blog。
4.3 在blog的model中新建一张表比如叫Article:
引入UEditorField
from DjangoUeditor.modelsimport UEditorField
from django.dbimport models
class Article(models.Model):
title = models.CharField(max_length=100, verbose_name='标题')
content = UEditorField(width=600, height=300, toolbars="full", imagePath="images/", filePath="files/",
upload_settings={"imageMaxSize":1204000},
settings={}, verbose_name='内容')
create_time = models.DateTimeField(auto_now_add=True, verbose_name='发表时间')
class Meta:
db_table ='Article'
verbose_name ='文章'
verbose_name_plural = verbose_name
在blog的admin.py中添加对表的管理
然后通过python manage.py makemigrations 和python mamage.py migrate 生成数据库。通过python manage.py createsuperuser 创建一个超级管理员用于登录后台。执行完命令后就开始运行项目通过python manage.py runserver运行。运行成功后访问,http://127.0.0.1:8000/admin/用自己创建的管理员帐号登录后台进去后效果如下:
点击文章添加文章,就可以看到编辑器已经加载出来了
但是,发现上传图片是有问题的,如何解决,其实很简单,只需要在settings.py文件中添加静态文件路径即可
MEDIA_URL ='/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
这个路径的名称可以自由命名这里就直接使用media
在urls中配置还需要配置一下静态路径才能显示图片如下:
if settings.DEBUG:
media_root = os.path.join(settings.BASE_DIR, settings.MEDIA_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=media_root)
配置好后刷新界面,再次上传图片,就可以正常显示了
这样django在admin中就可以使用DjangoUeditor了,那么在前端也需要怎么用呢?,其实也很简单,django是可以自定义field的,DjangoUeditor已为我们定义好了,使用forms就可以了。
三、前端使用DjangoUeditor
1. 在项目的templates中新建html文件模版(如:index.html)
2.在blog的view.py中添加一个函数
def index(request):
return render(request, 'index.html')
3.在urls.py中配置路由
path('', views.index),
访问 http://127.0.0.1:8000/看看模版是否正常加载,正常加载之后就进入下一步。
4.在views.py中定义编辑器的form
class TestUEditorForm(forms.Form):
content = UEditorField('内容', width=600, height=300, toolbars="full", imagePath="images/", filePath="files/",
upload_settings={"imageMaxSize":1204000},
settings={})
配置好后,当我们运行项目后发现出错了,心情不美丽了。
说是forms出错了,咋办,我们有源码就好办,这也就是为什么要使用源码集成的原因。
根据提示对源码进行修改,找到django2_DjangoUeditor/extra_apps/DjangoUeditor/forms.py
我们发现就是这里报错了
修改为
再次运行项目我们发现就ok了接下来我们需要在html中使用编辑器
刷新界面后,我们要的编辑器就出现了
四、总结:
在此,本文的内容就介绍完了,这也是我最近做项目使用到了DjangoUeditor,对DjangoUeditor使用进行总结记录,有什么问题欢迎指正。如果喜欢我的文章欢迎关注我,一起学习,一起成长。
源码下载: https://github.com/juzhizhang/django2_DjangoUeditor
简书地址: Code人生
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
【PHP】in_array需要注意的点
in_array (PHP 4, PHP 5, PHP 7) in_array — 检查数组中是否存在某个值 说明 ---- bool in_array ( mixed $needle , array $haystack [, bool $strict = FALSE ] ) 大海捞针,在大海(haystack)中搜索针( needle),如果没有设置 strict 则使用宽松的比较。 参数 ---- needle 待搜索的值。 Note: 如果 needle 是字符串,则比较是区分大小写的。 haystack 待搜索的数组。 strict 如果第三个参数 strict 的值为 TRUE 则 in_array() 函数还会检查 needle 的类型是否和 haystack 中的相同。 返回值 ---- 如果找到 needle 则返回 TRUE,否则返回 FALSE。 看问题: <?php $array = range(0, 7); $string = 's'; if (in_array($string, $array)) { echo 1; } else { echo 2; } ...
- 下一篇
JavaScript的数组知识案例之随机点名器
本次分享JavaScript主要知识点涉及到for循环、if选择结构判断语句、数组的定义、定时器、清除定时器、日期对象的使用。 执行后效果图: 思路: 1.网页结构搭建: HTML 2.网页布局美化: CSS 3.随机功能实现: JavaScript 分析后案例思路图: 编码工作: Html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于JavaScript的随机点名工具</title> </head> <body> <h1>王者荣耀英雄随机点名系统</h1> <span id="span"></span> <div class="box" id="box"></div> <input type="button" id="btn" value="点名"/> </body> </html> Css...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- CentOS关闭SELinux安全模块
- CentOS7设置SWAP分区,小内存服务器的救世主
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Docker快速安装Oracle11G,搭建oracle11g学习环境