富文本编辑器

  • 借助富文本编辑器,管理员能够编辑出来一个包含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()
  • 在后台管理界面中,就会显示为富文本编辑器,而不是多行文本框

自定义使用

  • 定义视图编辑器,用于显示编辑器并完成提交
def editor(request):

    return render(request, 'other/editor.html')
  • 配置网址
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>
  • 定义视图内容,接收请求,并更新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>

results matching ""

    No results matching ""