［舊］使用DjangoUeditor在django中進行富文本開發
Django的安裝和生成項目這裏不介紹了。php
DjangoUeditor下載地址：https://github.com/zhangfisher/DjangoUeditorcss
使用python setup.py install 安裝， 推薦使用pip install DjangoUeditor安裝， html
1. 將python安裝目錄下生成的/site-packages/DjangoUeditor/static/ueditor 複製到本身的django項目的media目錄下.前端
2. 在本身的templete下面的須要使用富文本的html文件中包含進來剛纔複製過來的ueditor目錄下的這三個文件：/ueditor/ueditor.config.js， /ueditor/ueditor.all.js，/ueditor/themes/default/css/ueditor.css python
3. 在html中須要的位置增長textarea控件: <textarea id="content" name="content" rows="20"></textarea> , 接下來增長Js語句：git
<script>
var ue=new UE.ui.Editor();
ue.render('content');
</script>
這時去經過django訪問這個頁面，已經能看到以下圖的富文本編輯框了：github
可是這裏的圖片是無法上傳的，由於須要後臺配置，
web
咱們打開ueditor.config.jsdjango
找到
json
/**
* 配置項主體。注意，此處全部涉及到路徑的配置別遺漏URL變量。
*/
window.UEDITOR_CONFIG = {
//爲編輯器實例添加一個路徑，這個不能被註釋
UEDITOR_HOME_URL: URL
// 服務器統一請求接口路徑
, serverUrl: "php/controller.php"
// ,catchRemoteImageEnable:false
//工具欄上的全部的功能按鈕和下拉框，能夠在new編輯器的實例時選擇本身須要的重新定義
, toolbars: [[
'fullscreen', 'source', '|','simpleupload', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
'horizontal', 'date', 'time', 'spechars', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts',
]]
這裏，咱們看到服務器統一請求接口路徑爲php路徑下的controller.php，可是這裏咱們使用django去寫這個請求接口：
將serverUrl改成咱們django的接口地址，接下來在django項目中新建名爲Ueditor的目錄，這裏不須要添加到django的app中，這個目錄結構以下：
config.py文件爲配置文件，裏面的數據是從ueditor/php/config.json中取出來的一個配置列表：
# coding=utf-8
# /* 先後端通訊相關的配置,註釋只容許使用多行方式 */
config = {
# /* 上傳圖片配置項 */
"imageActionName": "uploadimage", # /* 執行上傳圖片的action名稱 */
"imageFieldName": "upfile", #/* 提交的圖片表單名稱 */
"imageMaxSize": 2048000, #/* 上傳大小限制，單位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], #/* 上傳圖片格式顯示 */
"imageCompressEnable": True, #/* 是否壓縮圖片,默認是true */
"imageCompressBorder": 1600, #/* 圖片壓縮最長邊限制 */
"imageInsertAlign": "none", #/* 插入的圖片浮動方式 */
"imageUrlPrefix": "", #/* 圖片訪問路徑前綴 */
"imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", #/* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
# /* {filename} 會替換成原文件名,配置這項須要注意中文亂碼問題 */
#/* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */
#/* {time} 會替換成時間戳 */
#/* {yyyy} 會替換成四位年份 */
#/* {yy} 會替換成兩位年份 */
#/* {mm} 會替換成兩位月份 */
# /* {dd} 會替換成兩位日期 */
# /* {hh} 會替換成兩位小時 */
# /* {ii} 會替換成兩位分鐘 */
# /* {ss} 會替換成兩位秒 */
# /* 非法字符 \ : * ? " < > | */
# /* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */
# /* 塗鴉圖片上傳配置項 */
"scrawlActionName": "uploadscrawl", # /* 執行上傳塗鴉的action名稱 */
"scrawlFieldName": "upfile", # /* 提交的圖片表單名稱 */
"scrawlPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", # /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
"scrawlMaxSize": 2048000, #/* 上傳大小限制，單位B */
"scrawlUrlPrefix": "", #/* 圖片訪問路徑前綴 */
"scrawlInsertAlign": "none",
# /* 截圖工具上傳 */
"snapscreenActionName": "uploadimage", # /* 執行上傳截圖的action名稱 */
"snapscreenPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", #/* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
"snapscreenUrlPrefix": "", # /* 圖片訪問路徑前綴 */
"snapscreenInsertAlign": "none", #/* 插入的圖片浮動方式 */
# /* 抓取遠程圖片配置 */
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", #/* 執行抓取遠程圖片的action名稱 */
"catcherFieldName": "source", # /* 提交的圖片列表表單名稱 */
"catcherPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", #/* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
"catcherUrlPrefix": "", #/* 圖片訪問路徑前綴 */
"catcherMaxSize": 2048000, #/* 上傳大小限制，單位B */
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], #/* 抓取圖片格式顯示 */
# /* 上傳視頻配置 */
"videoActionName": "uploadvideo", #/* 執行上傳視頻的action名稱 */
"videoFieldName": "upfile", # /* 提交的視頻表單名稱 */
"videoPathFormat": "/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", #/* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
"videoUrlPrefix": "", #/* 視頻訪問路徑前綴 */
"videoMaxSize": 102400000, #/* 上傳大小限制，單位B，默認100MB */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], # /* 上傳視頻格式顯示 */
# /* 上傳文件配置 */
"fileActionName": "uploadfile", #/* controller裏,執行上傳視頻的action名稱 */
"fileFieldName": "upfile", # /* 提交的文件表單名稱 */
"filePathFormat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", #/* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
"fileUrlPrefix": "", #/* 文件訪問路徑前綴 */
"fileMaxSize": 51200000, #/* 上傳大小限制，單位B，默認50MB */
"fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
], #/* 上傳文件格式顯示 */
# /* 列#出指定目錄下的圖片 */
"imageManagerActionName": "listimage", #/* 執#行圖片管理的action名稱 */
"imageManagerListPath": "/ueditor/php/upload/image/", #/* 指定要列出圖片的目錄 */
"imageManagerListSize": 20, # /* 每次列出文件數量 */
"imageManagerUrlPrefix": "", #/* 圖片訪問路徑前綴 */
"imageManagerInsertAlign": "none", #/* 插入的圖片浮動方式 */
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], #/* 列出的文件類型 */
# /* 列出指定目錄下的文件 */
"fileManagerActionName": "listfile", #/* 執行文件管理的action名稱 */
"fileManagerListPath": "/ueditor/php/upload/file/", #/* 指定要列出文件的目錄 */
"fileManagerUrlPrefix": "", #/* 文件訪問路徑前綴 */
"fileManagerListSize": 20, #/* 每次列出文件數量 */
"fileManagerAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
] #/* 列出的文件類型 */
}
在文件views.py中就是咱們爲前臺的富文本寫的配置和上傳圖片的接口：
# coding:utf-8
'''
Created on 2012-8-29
@author: yihaomen.com
'''
import json
import os
import time
import uuid
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
from goodnet import settings
from app.Ueditor.config import config
def customConfig(request):
params = request.GET
if params['action'] == 'uploadimage':
return ueditor_ImgUp(request)
return HttpResponse(json.dumps(config))
def __myuploadfile(fileObj, source_pictitle, source_filename, fileorpic='pic'):
""" 一個公用的上傳文件的處理 """
myresponse = ""
if fileObj:
filename = fileObj.name
fileExt = filename.split('.')[1]
file_name = str(uuid.uuid1())
subfolder = time.strftime("%Y%m")
if not os.path.exists(settings.SRC_ROOT[1] + subfolder):
os.makedirs(settings.SRC_ROOT[1] + subfolder)
path = str(subfolder + '/' + file_name + '.' + fileExt)
if fileExt.lower() in (
'jpg', 'jpeg', 'bmp', 'gif', 'png', "rar", "doc", "docx", "zip", "pdf", "txt", "swf", "wmv"):
phisypath = settings.SRC_ROOT[1] + path
destination = open(phisypath, 'wb+')
for chunk in fileObj.chunks():
destination.write(chunk)
destination.close()
real_url = '/static/img/' + subfolder + '/' + file_name + '.' + fileExt
myresponse = "{'original':'%s','url':'%s','title':'%s','state':'%s'}" % (
source_filename, real_url, source_pictitle, 'SUCCESS')
return myresponse
@csrf_exempt
def ueditor_ImgUp(request):
""" 上傳圖片 """
fileObj = request.FILES.get('upfile', None)
source_pictitle = request.POST.get('pictitle', '')
source_filename = request.POST.get('fileName', '')
response = HttpResponse()
myresponse = __myuploadfile(fileObj, source_pictitle, source_filename, 'pic')
response.write(myresponse)
return response
而後再django根目錄下的urls.py中增長url對應到views.py中的customConfig函數來。保證ueditor.config.js中配置的serverUrl可以訪問到customConfig函數， 在customConfig函數裏面，判斷前端js的get參數action,若是爲uploadimage則轉到本身的圖片上傳方法，返回的數據爲構建的
{'original':'%s','url':'%s','title':'%s','state':'%s'}
的一個字符串。確保返回的url可以訪問到上傳上來的圖片。配置過程當中的路徑，須要根據須要自行配置。
最後測試富文本添加圖片：
至此，使用DjangoUeditor在django下富文本的配置成功。
相關文章
- 1. django使用富文本應用DjangoUeditor
- 2. Django使用Djangoueditor富文本編輯器
- 3. Django-python3下富文本編輯器DjangoUeditor
- 4. Python3下Django使用Djangoueditor富文本編輯器
- 5. Django後臺使用富文本編輯器DjangoUeditor
- 6. djangoueditor富文本編輯器
- 7. django2集成DjangoUeditor富文本編輯器
- 8. Django使用DjangoUeditor教程
- 9. DjangoUeditor富文本插件使用問題 TemplateDoesNotExit at /admin/
- 10. 在Django項目中使用富文本編輯器
- 更多相關文章...
- • 在Spring中使用Redis - Redis教程
- • 在Java程序中使用Redis - Redis教程
- • PHP開發工具
- • Scala 中文亂碼解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. django使用富文本應用DjangoUeditor
- 2. Django使用Djangoueditor富文本編輯器
- 3. Django-python3下富文本編輯器DjangoUeditor
- 4. Python3下Django使用Djangoueditor富文本編輯器
- 5. Django後臺使用富文本編輯器DjangoUeditor
- 6. djangoueditor富文本編輯器
- 7. django2集成DjangoUeditor富文本編輯器
- 8. Django使用DjangoUeditor教程
- 9. DjangoUeditor富文本插件使用問題 TemplateDoesNotExit at /admin/
- 10. 在Django項目中使用富文本編輯器