先從官網(wǎng)下載插件，放在static文件下

前端引入

學(xué)習(xí)python中有什么不懂的地方，小編這里推薦加小編的python學(xué)習(xí)群：895,817, 687
有任何不懂的都可以在里面交流，還有很好的視頻教程pdf學(xué)習(xí)資料，大家一起學(xué)習(xí)交流！

<script type="text/javascript" src="/static/back/kindeditor/kindeditor-all.js"></script><script>KindEditor.ready(function (K) {window.editor = K.create('#content', { {# 加上這句話可以使jquery能獲取到富文本編輯器的內(nèi)容#}afterBlur: function(){this.sync();},width: "800",height: "600",resizeType: 0,uploadJson: "/back/article/upload/",extraFileUploadParams: {csrfmiddlewaretoken: "{{ csrf_token }}"},filePostName: "upload_img"//上傳圖片的名稱});});</script>

定義富文本編輯器在頁面中的位置

<textarea id="content" name="content" style="width:700px;height:250px;"></textarea>

ajax提交

#提交按鈕 <input name="dosubmit" type="button" id="dosubmit" class="btn" value="馬上發(fā)布"># 提交富文本編輯器的內(nèi)容 <script> {# 提交文章#}$('#dosubmit').click(function () {$.post('/back/article/back_add/',$('form').serialize(),function (data) {if (data['status']==0){layer.msg(data['info']){#location.href="/back/index/index/"#}}else{layer.msg(data['info'])}},'json')}) </script>

路由

# 富文本編輯器 re_path('article/upload/', article.upload, name='article/upload/'), # 接受form表單內(nèi)容添加文章 re_path('article/add/', article.add, name='article/add/'),

后臺接收圖片方法

#富文本編輯器里上傳圖片 import os def upload(request):"""編輯器上傳文件接受視圖函數(shù):param request::return:"""# print(request.FILES)img_obj=request.FILES.get("upload_img")# print(img_obj.name)path=os.path.join(settings.MEDIA_ROOT,"add_article_img",img_obj.name)with open(path,"wb") as f:for line in img_obj:f.write(line)response={"error":0,"url":"/media/add_article_img/%s"%img_obj.name}return HttpResponse(json.dumps(response))

后臺接收內(nèi)容方法

def add(request):member_obj=Member.objects.all()member_id = request.session.get('member_id')member_name=request.session.get('member_name')if request.method == 'POST':title = request.POST.get("title")description = request.POST.get('description')content = request.POST.get("content")addtime=time.strftime('%Y-%m-%d',time.localtime())# 防止xss攻擊,過濾script標(biāo)簽soup=BeautifulSoup(content,"html.parser")#通過字符串創(chuàng)建BeautifulSoup對象，即將字符串轉(zhuǎn)為對象，然后調(diào)用對象里的相關(guān)方法print(soup.find_all())#[<img alt="" src="/media/add_article_img/hand.png"/>, <script charset="utf-8" src="/static/blog/kindeditor/kindeditor-all.js"></script>,<img src="/media/add_article_img/thumb_50_img1.jpg" alt="" />]for tag in soup.find_all():print(tag.name)#img scriptif tag.name=="script":tag.decompose()# # 構(gòu)建摘要數(shù)據(jù),獲取標(biāo)簽字符串的文本前150個符號desc = soup.text[0:150] + "..."obj=Article.objects.create(article_title=title,article_description=desc,article_content=str(content),member_id=member_id,article_addtime=str(addtime).replace('/','-'))if obj:return redirect('/back/article/add/')return render(request,'article/add.html',locals())

頁面效果

總結(jié)

以上是生活随笔為你收集整理的django项目中使用KindEditor富文本编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。