Ueditor的作用不再贅述,這里記錄下Django中使用Ueditor的步驟
下載DjangoUeditor3
解壓把文件夾中的DjangoUeditor提取出來, 如圖
前兩步下載安裝也可以為:
pip install DjangoUeditor
把DjangoUeditor當作我們項目的應用,并放到項目的根目錄處
在setting加入DjangoUeditor應用設置,并且加入上傳圖片時的路徑選擇
INSTALLED_APPS = [ 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'zz', 'DjangoUeditor' #新增應用 ] MEDIA_URL = '/media/' #新增ueditor上傳文件 映射目錄 MEDIA_ROOT = os.path.join(BASE_DIR,'statics/media') #新增上傳文件 實際上傳 目錄 #項目下建設statics/media目錄 #設置ueditor文件上傳目錄
5. 在項目的url.py里面加入應用的路徑和圖片的上傳路徑映射
1. 在項目的url.py里面加入應用的路徑和圖片的上傳路徑
上傳圖片時, 出現(xiàn)'X-Frame-Options' to 'deny'
參考這里解決:http://tjegd.cn/news/show/1116.html
到DjangoUeditor應用下的form.py, 修改引入方式
6. 在視圖函數(shù)里面加載模板并初始化要顯示的內(nèi)容
class Add(View): def get(self,request): initContent = "<h1>初始化內(nèi)容</h1>" selectTree = SortAll.selectTree(20,"sortid") return render(request,'zz/news/add.html',locals())
7. 模板里加載js
<script src="/static/ueditor/ueditor.config.js"></script> <script src="/static/ueditor/ueditor.all.min.js"></script> <script id="content_id" name="content" style="display: inline-block;" type="text/plain">{{ initContent | safe }}</script> <script type="text/javascript"> var ue = UE.getEditor('content_id',{'initialFrameWidth': 700, 'initialFrameHeight': 500, 'serverUrl': '/ueditor/controller/?imageMaxSize=2097152&imagePathFormat=images%2F&filePathFormat=files'}); </script>
另外:
1. Django3.0.3移除了six。
2. six可以單獨安裝:pip install six。另外,urllib 好像也獨立出來了,引用時不需有前綴。
3. 安裝完six之后,將DjangoUEditor中有關的引用路徑修改一下。包括如下三個文件的修改。
1> DjangoUEditor目錄下的views.py文件中有如下行
from django.utils.six.moves.urllib.request import urlopen
from django.utils.six.moves.urllib.parse import urljoin
改為:
from six.moves.urllib.request import urlopen
from six.moves.urllib.parse import urljoin
2> widgets.py文件中有如下一行:
from django.utils.six import string_types
修改為:
from six import string_types
3> urllib似乎已從six之中獨立出來,故commands.py文件中的如下一行:
from django.utils.six.moves.urllib.parse import urljoin
改為:
from urllib.parse import urljoin
最終顯示效果如下