借助富文本编辑器,管理员能够编辑出来一个包含html的页面,从而页面的显示效果,可以由管理员定义,而不用完全依赖于前期开发人员 此处以tinymce为例,其它富文本编辑器的使用可
- 借助富文本编辑器,管理员能够编辑出来一个包含html的页面,从而页面的显示效果,可以由管理员定义,而不用完全依赖于前期开发人员
- 此处以tinymce为例,其它富文本编辑器的使用可以自行学习
- 使用编辑器的显示效果为:
下载安装
- 在网站pypi网站搜索并下载"django-tinymce-2.4.0"
- 解压
- 进入解压后的目录,工作在虚拟环境,安装
应用到项目中
- 在settings.py中为INSTALLED_APPS添加编辑器应用
...
'tinymce',
)
- 在settings.py中添加编辑配置项
'theme': 'advanced',
'width': 600,
'height': 400,
}
- 在根urls.py中配置
...
url(r'^tinymce/', include('tinymce.urls')),
]
- 在应用中定义模型的属性
from tinymce.models import HTMLField
class HeroInfo(models.Model):
...
hcontent = HTMLField()
- 在后台管理界面中,就会显示为富文本编辑器,而不是多行文本框
自定义使用
- 定义视图editor,用于显示编辑器并完成提交
return render(request, 'other/editor.html')
- 配置url
...
url(r'^editor/$', views.editor, name='editor'),
]
- 创建模板editor.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="/content/">
<input type="text" name="hname">
<br>
<textarea name='hcontent'>哈哈,这是啥呀</textarea>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
- 定义视图content,接收请求,并更新heroinfo对象
hname = request.POST['hname']
hcontent = request.POST['hcontent']
heroinfo = HeroInfo.objects.get(pk=1)
heroinfo.hname = hname
heroinfo.hcontent = hcontent
heroinfo.save()
return render(request, 'other/content.html', {'hero': heroinfo})
- 添加url项
...
url(r'^content/$', views.content, name='content'),
]
- 定义模板content.html
<html>
<head>
<title></title>
</head>
<body>
姓名:{{hero.hname}}
<hr>
{%autoescape off%}
{{hero.hcontent}}
{%endautoescape%}
</body>
</html>