30 Django高级 - 富文本编辑器

简介: 30 Django高级 - 富文本编辑器
  • 借助富文本编辑器,管理员能够编辑出来一个包含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>
目录
相关文章
|
NoSQL 调度 Redis
33 Django高级 - celery
33 Django高级 - celery
41 0
|
4月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
171 0
|
7月前
|
缓存 数据处理 数据库
Django 框架高级进阶:探索最佳实践与性能优化
【5月更文挑战第18天】在Django开发中,掌握高级技巧和性能优化是关键。最佳实践包括合理组织代码结构、数据库设计优化、使用信号机制和缓存策略。性能优化涉及数据库查询优化(如select_related和prefetch_related)、异步任务处理(如Celery)、启用HTTP缓存、优化模板渲染和服务器配置调整。示例中,通过分页减少数据加载量以提高性能。不断探索和应用这些方法能提升用户体验,应对高并发和大规模数据挑战。
116 6
|
自然语言处理 搜索推荐 索引
32 Django高级 - 全文检索
32 Django高级 - 全文检索
60 0
|
7月前
|
Python
Django:构建 Web 应用的高级 Python 框架(二)安装 Django
Django:构建 Web 应用的高级 Python 框架(二)安装 Django
|
XML 中间件 数据格式
Django 高级指南:深入理解和使用类视图和中间件
Django 是一款强大的 Python Web 框架,它提供了一套完整的解决方案,让我们能够用 Python 语言快速开发和部署复杂的 Web 应用。在本文中,我们将会深入研究 Django 中的两个高级特性:类视图(Class-Based Views)和中间件(Middleware)。
|
7月前
|
前端开发 安全 中间件
Django:构建 Web 应用的高级 Python 框架(一)
Django:构建 Web 应用的高级 Python 框架(一)
|
负载均衡 应用服务中间件 nginx
34 Django高级 - 布署
34 Django高级 - 布署
28 0
|
缓存 NoSQL 数据库
31 Django高级 - 缓存
31 Django高级 - 缓存
54 0
|
SQL 前端开发 JavaScript
29 Django高级- Ajax
29 Django高级- Ajax
49 0