環境:
pycharm,django1.11,python2.7
第一種:直接 pip install DjangoUeditor,直接從網上安裝到pycharm
由於是直接安裝,ueditor.html,ueditor_old.html會顯示無法加載,請到項目下面查到這兩個文件,把它拷到 templates 文件夾下面 ,這邊是venv/DjangoUeditor\templates下面,大家根據各自的要求進行查看。其它model、urls、settings配置跟第二種一樣,請直接看下面
第二種:
1.首先,在項目下面隨便新建文件夾名ex_blog,
2.從https://files.pythonhosted.org/packages/92/78/6a97dabce8ab394c78c8ede4bd65a9d740685d65b942641e5859408af102/DjangoUeditor-1.8.143.zip,
下載安裝包,解壓包,把最里面的那個文件夾,DjangoUeditor拷到ex_blog下面,
3.通過pycharm 選中ex_blog文件夾,點擊鼠標右鍵選中菜單 mark directory as 選擇 sources root ,就可以變成上面的藍色文件夾目錄,(這一部分重要,用於把整個文件夾提升為項目可直接調用文件,關系到后面程序的調用)
4.在settings.py的INSTALLED_APPS中引入 DjangoUeditor,並文件中下面添加代碼,如下 :
sys.path.insert(0, os.path.join(BASE_DIR, 'ex_blog'))
並在最后添加圖片上傳路徑
MEDIA_URL = '/static/uepload/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/uepload')
5.在根的urls.py中添加(注意,並不是app中的urls.py)
url('^ueditor/', include('DjangoUeditor.urls'))
6.在models.py中引入UEditorField(注意:models模版中不可以對寬高進行設置)
from DjangoUeditor.models import UEditorField
例如:
class Blogblog(models.Model):
content=UEditorField(verbose_name='內容')
7.在admin.py中注冊,即可以在admin后台中使用富文本
from .models import Blogblog
class Blogblogadmin(admin.ModelAdmin):
list_display = ['pk','content']
admin.site.register(Blogblog,Blogblogadmin)
注意:(第1種和第2種)由於django1.11都會報patterns的錯誤,請到DjangoUeditor目錄下面urls.py中的patterns去除掉,換url,如下:
#coding:utf-8
from django import VERSION
if VERSION[0:2]>(1,3):
from django.conf.urls import url
else:
from django.conf.urls.defaults import url
from views import get_ueditor_controller
urlpatterns = [
url(r'^controller/$',get_ueditor_controller)
]
HTML如何加載富文本
1.先在views.py中導入模塊
from DjangoUeditor.forms import UEditorField
from django.forms import forms
from .models import Blogblog
2.定義一個forms(設置寬高,以及圖片或文件上傳的目錄,根據上面設置是在uepload目錄下面images和files)
class TestUEditorForm(forms.Form):
content = UEditorField('內容', width=600, height=300, toolbars="full", imagePath="images/", filePath="files/",upload_settings={"imageMaxSize":1204000},settings={})
3.把數據庫內容渲染到頁面
class Index(View):
def get(self,request):
form=TestUEditorForm()
blogIndex=Blogblog.objects.get(pk=1)
context=blogIndex.content
return render(request,'index.html',{'form':form,'context':context})
4.HTML頁面的舉例設置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{{ form.media }}
</head>
<body>
{{ form }}
</body>
</html>
注意:{{ form.media }} 和 {{ form }} 都必須加載,才可以使用富文本
另外:如果數據庫中加載出來的數據是html代碼,
可以使用 {{ context|safe }} 直接轉義.
或者使用
{% autoescape off %}
{{ context }}
{% endautoescape %}