{# 加載靜態文件 #}

{% load static %}

首頁

{# 載入js庫 #}

富文本

查看

initKindEditor();

function initKindEditor() {

var kind = KindEditor.create('#content', {

uploadJson:'/md_admin/imageupload',

width: '100%', // 文本框寬度(可以百分比或像素)

height: '300px', // 文本框高度(只能像素)

minWidth: 200, // 最小寬度(數字)

minHeight: 400 // 最小高度(數字)

});

}

function checkit(){

var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()

alert(content);

}

需要注意的一點是，如果你要異步將富文本內容提交給后臺，就需要動態獲取富文本的內容，那么需要這樣寫

var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()

而使用 傳統的 $("#content").val() 是獲取不到html標簽的

另外如果你想利用富文本編輯器上傳文件到本地，前端需要添加配置：uploadJson:'/md_admin/imageupload'

后臺文件上傳代碼：

#kindeditor上傳方法

def imageupload(request):

if request.method == 'POST':

item = {}

file = request.FILES.get('imgFile')

f = open(os.path.join(UPLOAD_ROOT,'',file.name),'wb')

item['message'] = '上傳成功'

item['url'] = 'http://localhost:8000/upload/'+ file.name

item['error'] = 0

#寫文件 遍歷圖片文件流

for chunk in file.chunks():

f.write(chunk)

return HttpResponse(json.dumps(item,ensure_ascii=False),content_type='application/json')

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的富文本框让最大四百像素_Django2.0.4 结合 KindEditor 4.1.11 富文本编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。