首頁技術文章正文

Django富文本編輯器

更新時間:2018-09-30 來源:黑馬程序員 瀏覽量:

1、下載安裝
1、在網站pypi網站搜索并下載"django-tinymce-2.4.0"

2、解壓：tar zxvf django-tinymce-2.4.0.tar.gz

3、進入解壓后的目錄，工作在虛擬環(huán)境，安裝：
python setup.py install

2、應用到項目
1、在settings.py中為INSTALLED_APPS添加編輯器應用
INSTALLED_APPS = (
...
'tinymce',
)

2、在settings.py中添加編輯配置項
TINYMCE_DEFAULT_CONFIG = {
'theme': 'advanced',
'width': 600,
'height': 400,
}

3、在根urls.py中配置
urlpatterns = [
...
url(r'^tinymce/', include('tinymce.urls')),
]

4、在應用中定義模型的屬性
from django.db import models
from tinymce.models import HTMLField

class GoodInfo(models.Model):
...
gdetail = HTMLField()

3、自定義使用
1、定義視圖editor，用于顯示編輯器并完成提交
def editor(request):
return render(request, 'other/editor.html')

2、配置url
urlpatterns = [
...
url(r'^editor/$', views.editor, name='editor'),
]

3、創(chuàng)建模板editor.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src='/static/tiny_mce/tiny_mce.js'></script>
<script type="text/javascript">
tinyMCE.init({
'mode':'textareas',
'theme':'advanced',
'width':400,
'height':100
});
</script>
</head>
<body>
<form method="post" action="/detail/">
<input type="text" name="hname">
<br>
<textarea name='gdetail'>這是一個富文本編輯器</textarea>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>

4、定義視圖detail，接收請求，并更新goodInfo對象
def detail(request):
hname = request.POST['hname']
gdetail = request.POST['gdetail']

goodinfo = GoodInfo.objects.get(pk=1)
goodinfo.hname = hname
goodinfo.gdetail = gdetail
goodinfo.save()

return render(request, 'other/detail.html', {'goods': goodinfo})

5、添加url項
urlpatterns = [
...
url(r'^detail/$', views.detail, name='detail'),
]

6、定義模板detail.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
姓名：{{goods.gname}}
<hr>
{%autoescape off%}
{{goods.gdetail}}
{%endautoescape%}
</body>
</html>


作者：黑馬程序員人工智能+python學院
首發(fā)：http://python.itheima.com/

分享到：
在線咨詢 我要報名
和我們在線交談！