django2集成DjangoUeditor富文本编辑器

  1. 云栖社区>
  2. 博客>
  3. 正文

django2集成DjangoUeditor富文本编辑器

code_sky 2018-04-20 11:31:00 浏览1369
展开阅读全文

       富文本编辑器,在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中,如下:


img_1e9781c3df952399cafe0adb64bf2765.png


2.在settings.py文件中添加两行代码:如下

  sys.path.insert(0, os.path.join(BASE_DIR, 'apps'))

  sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps'))


img_1bae10f55ef380deb788ba85e84b666e.png

 

3.通过pycharm 选中extra_apps文件夹点击鼠标右键选中菜单mark directory as 选择 sources root      就可以变成上面的蓝色文件夹目录就可以了。


img_d9277d8e0215d309d80838e28360281b.png


变成蓝色文件夹后就可以在settings.py 的INSTALLED_APPS中引入DjangoUeditor



img_85b21faf45cbc0ce3f23de6af7db881b.png


 

4.通过以上三步就将基本的集成工作就完成了,下面就可以开始使用了。

    4.1 在的urls.py中添加ueditor:


img_0d22d8ba6960c90e87272601b5349b44.png

 

  4.2 django后台使用ueditor,在我们的项目中通过django命令(djang-admin startapp blog)创建一 个 app叫blog,注意需要在settings.py的INSTALLED_APPS中添加blog。


img_11ad045bed2f953878290e0d76224fff.png

 

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中添加对表的管理


img_276ea3ebc52c48f349f66ca05d44592c.png


然后通过python manage.py makemigrations  和python mamage.py migrate 生成数据库。通过python manage.py createsuperuser 创建一个超级管理员用于登录后台。执行完命令后就开始运行项目通过python manage.py runserver运行。运行成功后访问,http://127.0.0.1:8000/admin/用自己创建的管理员帐号登录后台进去后效果如下:


img_305590a835fa0ed5a092403fc5b08f2b.png

 点击文章添加文章,就可以看到编辑器已经加载出来了


img_a9e0a8f8e14c57c23c0e2d09baedc5a8.png

但是,发现上传图片是有问题的,如何解决,其实很简单,只需要在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)


img_dba70602e9a360a17cef895fe3a6fb8b.png

配置好后刷新界面,再次上传图片,就可以正常显示了



img_75f72027f9ece4975a12b4e173eb9e82.png


这样django在admin中就可以使用DjangoUeditor了,那么在前端也需要怎么用呢?,其实也很简单,django是可以自定义field的,DjangoUeditor已为我们定义好了,使用forms就可以了。

三、前端使用DjangoUeditor

1. 在项目的templates中新建html文件模版(如:index.html)


img_2abe9acce9f81917a6de25ffcecec081.png

2.在blog的view.py中添加一个函数

def index(request):

return render(request, 'index.html')

3.在urls.py中配置路由

path('', views.index),


img_ef94a489cc41cfc3b1a4328b45695616.png


访问 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={})


img_727b36eecec27e4b823ca7abc748ccb9.png


配置好后,当我们运行项目后发现出错了,心情不美丽了。


img_fa354a49af9b6a98ebc002ae6a1686f2.png


说是forms出错了,咋办,我们有源码就好办,这也就是为什么要使用源码集成的原因。

根据提示对源码进行修改,找到django2_DjangoUeditor/extra_apps/DjangoUeditor/forms.py

我们发现就是这里报错了


img_45d387b2a889c80fcf8897632763ef83.png


修改为


img_9b144b3f01c0deb47c5d310caf66bef8.png


再次运行项目我们发现就ok了接下来我们需要在html中使用编辑器


img_5163c0589d733134b93743582f4741e6.png


刷新界面后,我们要的编辑器就出现了


img_d044fe6124df6cff78daa8f508636093.png

四、总结:

在此,本文的内容就介绍完了,这也是我最近做项目使用到了DjangoUeditor,对DjangoUeditor使用进行总结记录,有什么问题欢迎指正。如果喜欢我的文章欢迎关注我,一起学习,一起成长。


源码下载: https://github.com/juzhizhang/django2_DjangoUeditor

简书地址: Code人生 




网友评论

登录后评论
0/500
评论
code_sky
+ 关注