Django程序中如何添加js插件文本編輯器-創(chuàng)新互聯(lián)
這篇文章將為大家詳細講解有關Django程序中如何添加js插件文本編輯器，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
在沙坡頭等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供網(wǎng)站設計、
做網(wǎng)站 網(wǎng)站設計制作按需求定制制作,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,
品牌網(wǎng)站制作,
成都全網(wǎng)營銷推廣,
外貿(mào)網(wǎng)站建設,沙坡頭網(wǎng)站建設費用合理。
第一步:在首頁中添加寫博客的按鈕
寫博客
第二步:寫相應的創(chuàng)建博客視圖,編輯views.py文件
def create_article(request):
if request.method == "GET" :
return render(request,'create_aritcle.html')
elif request.method == "POST" :
print request.FILES ##查看上傳圖片的路徑
bbs_generater = utils.ArticleGen(request)
res = bbs_generater.create()
html_ele ="""
Your article <
%s> has been created successfully !!!,
""" %(res.id, res.title)
return HttpResponse(html_ele)
第三步:寫對于的編輯器html文件
首先寫一個空html文件,測試主頁是否能成功調(diào)用這個html,
{% extends 'index.html' %}
{% block content-left %}
編輯器頁面
{% endblock %}
{% block content-right %}
right bar
{% endblock %}
第四步:真正開始創(chuàng)建一個編輯器
首先:到https://www.tinymce.com/download/下載一個編輯器到文件
把這個js文件應用到頁面中:
第一步:下載tinymce編輯器,在本程序中已經(jīng)下載好,在/static/plugins/tinymce目錄中
第五步:在html文件中應用這個js問題,如下:
第六步:
tinymce.init({
selector: "#create_bbs"
});
第七步:在你需要的添加編輯起的地方應用下面代碼
{% csrf_token %}
第八步,這個免費的編輯器的功能有點少,可以點擊Advanced選擇其他
免費的插件
也就說把上面第六部的內(nèi)容換為下面的內(nèi)容
tinymce.init({
selector: "#create_bbs",
theme: "modern",
width: 800,
height: 300,
plugins: [
"advlist autolink link p_w_picpath lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor"
],
content_css: "css/content.css",
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink p_w_picpath | print preview media fullpage | forecolor backcolor emoticons",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h2', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
]
});
第九部。這個編輯器上存到數(shù)據(jù)庫的內(nèi)容是html內(nèi)容。
把form表單頭改為下面內(nèi)容,即可把文件提交到名稱為create_article的url中
{% csrf_token %}
具體的post請求到 create_article url的出來,上面第二步中有
views.py視圖調(diào)用上傳文件的模塊utils.py內(nèi)容如下:
import os
import models
from s10day12bbs import settings
class ArticleGen(object):
def __init__(self,request):
self.requset = request
def parse_data(self):
form_data = {
'title' : self.requset.POST.get('title'),
'content' : self.requset.POST.get('content'),
'summary' : self.requset.POST.get('summary'),
'author_id' : self.requset.user.userprofile.id,
'head_img': '',
'category_id' : 1
}
return form_data
def create(self):
self.data = self.parse_data()
bbs_obj = models.Article(**self.data)
bbs_obj.save()
filename = handle_upload_file(self.requset,self.requset.FILES['head_img']) #獲取圖片路徑并保存到數(shù)據(jù)庫
bbs_obj.head_img = filename
bbs_obj.save()
return bbs_obj
def update(self):
pass
def handle_upload_file(request, file_obj):
upload_dir = '%s/%s' % (settings.BASE_DIR, settings.FileUploadDir)
if not os.path.isdir(upload_dir):
os.mkdir(upload_dir)
print '---->', dir(file_obj)
with open('%s/%s' % (upload_dir, file_obj.name), 'wb') as destination:
for chunk in file_obj.chunks():
destination.write(chunk)
return file_obj.name
完整的創(chuàng)建文本編輯器前端頁面：
{% extends 'index.html' %}
{% block container %}
{% csrf_token %}
標題
重慶分公司
重慶分公司
