Django 第三方引用富文本编辑器6.1
【摘要】
借助富文本编辑器，管理员能够编辑出来一个包含html的页面，从而页面的显示效果，可以由管理员定义，而不用完全依赖于前期开发人员此处以tinymce为例，其它富文本编辑器的使用可以自行学习使用编辑器的显示效果为：
下载安装
在网站pypi网站搜索并下载"django-tinymce-2.4.0"解压
tar zxvf...
- 借助富文本编辑器，管理员能够编辑出来一个包含html的页面，从而页面的显示效果，可以由管理员定义，而不用完全依赖于前期开发人员
- 此处以tinymce为例，其它富文本编辑器的使用可以自行学习
- 使用编辑器的显示效果为：
下载安装
- 在网站pypi网站搜索并下载"django-tinymce-2.4.0"
- 解压
tar zxvf django-tinymce-2.4.0.tar.gz
- 进入解压后的目录，工作在虚拟环境，安装
python setup.py install
应用到项目中
- 在settings.py中为INSTALLED_APPS添加编辑器应用
-
INSTALLED_APPS = (
-
...
-
'tinymce',
-
)
- 在settings.py中添加编辑配置项
-
TINYMCE_DEFAULT_CONFIG = {
-
'theme': 'advanced',
-
'width': 600,
-
'height': 400,
-
}
- 在根urls.py中配置
-
urlpatterns = [
-
...
-
url(r'^tinymce/', include('tinymce.urls')),
-
]
- 在应用中定义模型的属性
-
from django.db import models
-
from tinymce.models import HTMLField
-
-
class HeroInfo(models.Model):
-
...
-
hcontent = HTMLField()
-
- 在后台管理界面中，就会显示为富文本编辑器，而不是多行文本框
自定义使用
- 定义视图editor，用于显示编辑器并完成提交
-
def editor(request):
-
return render(request, 'other/editor.html')
- 配置url
-
urlpatterns = [
-
...
-
url(r'^editor/$', views.editor, name='editor'),
-
]
- 创建模板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="/content/">
-
<input type="text" name="hname">
-
<br>
-
<textarea name='hcontent'>哈哈，这是啥呀</textarea>
-
<br>
-
<input type="submit" value="提交">
-
</form>
-
</body>
-
</html>
- 定义视图content，接收请求，并更新heroinfo对象
-
def content(request):
-
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项
-
urlpatterns = [
-
...
-
url(r'^content/$', views.content, name='content'),
-
]
- 定义模板content.html
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title></title>
-
</head>
-
<body>
-
姓名：{{hero.hname}}
-
<hr>
-
{%autoescape off%}
-
{{hero.hcontent}}
-
{%endautoescape%}
-
</body>
-
</html>
文章来源: lansonli.blog.csdn.net，作者：Lansonli，版权归原作者所有，如需转载，请联系作者。
原文链接：lansonli.blog.csdn.net/article/details/102651632
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）