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人生