? ? ? ?富文本編輯器，在web開發(fā)中可以說是不可缺少的。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)創(chuàng)建一? ? ? ? ? 個 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='內(nèi)容')
create_time = models.DateTimeField(auto_now_add=True, verbose_name='發(fā)表時間')
class Meta:
db_table ='Article'
? ? ? ? verbose_name ='文章'
? ? ? ? verbose_name_plural = verbose_name
在blog的admin.py中添加對表的管理
然后通過python manage.py makemigrations? 和python mamage.py migrate 生成數(shù)據(jù)庫。通過python manage.py createsuperuser 創(chuàng)建一個超級管理員用于登錄后臺。執(zhí)行完命令后就開始運行項目通過python manage.py runserver運行。運行成功后訪問,http://127.0.0.1:8000/admin/用自己創(chuàng)建的管理員帳號登錄后臺進去后效果如下:
?點擊文章添加文章，就可以看到編輯器已經(jīng)加載出來了
但是，發(fā)現(xiàn)上傳圖片是有問題的，如何解決，其實很簡單，只需要在settings.py文件中添加靜態(tài)文件路徑即可
MEDIA_URL ='/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
這個路徑的名稱可以自由命名這里就直接使用media
在urls中配置還需要配置一下靜態(tài)路徑才能顯示圖片如下:
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中添加一個函數(shù)
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('內(nèi)容', width=600, height=300, toolbars="full", imagePath="images/", filePath="files/",
? ? ? ? ? ? ? ? ? ? ? ? ? upload_settings={"imageMaxSize":1204000},
? ? ? ? ? ? ? ? ? ? ? ? ? settings={})
配置好后，當我們運行項目后發(fā)現(xiàn)出錯了，心情不美麗了。
說是forms出錯了，咋辦，我們有源碼就好辦，這也就是為什么要使用源碼集成的原因。
根據(jù)提示對源碼進行修改，找到django2_DjangoUeditor/extra_apps/DjangoUeditor/forms.py
我們發(fā)現(xiàn)就是這里報錯了
修改為
再次運行項目我們發(fā)現(xiàn)就ok了接下來我們需要在html中使用編輯器
刷新界面后，我們要的編輯器就出現(xiàn)了
補充：有的小伙伴不知道在前端使用怎么在編輯器里填充值，這里說一下我的辦法，我是直接通過js注入，代碼如下
<script>
document.getElementById("id_content").value= '{{ article.content|safe }}'
</script>
id是你編輯器的id，value為你的要填充的內(nèi)容
四、總結(jié):
在此，本文的內(nèi)容就介紹完了，這也是我最近做項目使用到了DjangoUeditor，對DjangoUeditor使用進行總結(jié)記錄，有什么問題歡迎指正。如果喜歡我的文章歡迎關(guān)注我，一起學習，一起成長。
源碼下載:?https://github.com/juzhizhang/django2_DjangoUeditor
博客園地址: 猿哥愛碼
