django2集成DjangoUeditor富文本编辑器

       富文本编辑器，在web开发中能够说是不可缺乏的。django并无自带富文本编辑器，所以咱们须要本身集成，在这里推荐你们使用DjangoUeditor，由于DjangoUeditor封装了咱们须要的一些功能如文件上传、在后台和前台一块儿使用等，很是方便。

 

1、下载DjangoUeditor:

        1.python3: https://github.com/twz915/DjangoUeditor3/ (直接下载zip)

        2.python2:https://github.com/zhangfisher/DjangoUeditor(直接下载zip,或 pip install DjangoUeditor)

 

2、 新建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就能够了。

 

3、前端使用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中使用编辑器

 

刷新界面后，咱们要的编辑器就出现了

 

4、总结:

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

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

简书地址: Code人生