Django 第三方引用富文本编辑器6.1

简介: Django 第三方引用富文本编辑器6.1
  • 借助富文本编辑器,管理员能够编辑出来一个包含html的页面,从而页面的显示效果,可以由管理员定义,而不用完全依赖于前期开发人员
  • 此处以tinymce为例,其它富文本编辑器的使用可以自行学习
  • 使用编辑器的显示效果为:


image.png


下载安装



  • 在网站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>


目录
相关文章
|
4月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
182 0
|
Python
30 Django高级 - 富文本编辑器
30 Django高级 - 富文本编辑器
74 0
|
JSON 开发框架 JavaScript
Django加入markdown编辑器及markdown上传图片不回显避坑
一般来说一个CMS系统如博客系统都需要一个好的富文本编辑器,现在大家更多的是选择MarkDown编辑器来编辑内容。Django作为python的主流web开发框架当然少不了markdown的插件。本文介绍如何在Django框架中引入markdown编辑器及在使用markdown时的注意事项。
153 0
|
前端开发 关系型数据库 MySQL
Django| 给你博客装个Markdown编辑器
Django| 给你博客装个Markdown编辑器
1340 0
Django| 给你博客装个Markdown编辑器
|
前端开发 JavaScript Python
Pyhton编程:Django模板中引用css文件
Pyhton编程:Django模板中引用css文件
234 0
|
Python
django2集成DjangoUeditor富文本编辑器
       富文本编辑器,在web开发中可以说是不可缺少的。django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一些功能如文件上传、在后台和前台一起使用等,非常方便。
1999 0
|
JavaScript 数据格式 Python
11. Django 引入富文本编辑器KindEditor
打开微信扫一扫,关注微信公众号【数据与算法联盟】 转载请注明出处:http://blog.csdn.net/gamer_gyt 博主微博:http://weibo.com/234654758 Github:https://github.com/thinkgamer 写在前边的话 一路走来,DJango也用了挺久了,自己也做了一些基于Django的小项目,具体可看github,但是Django默认的admin后台编辑文本框实在是太丑了,而且单一,其实在很久之前就想写这篇文章了,但是由于种种原因拖延到了现在,终于下定了决心来写,现在时间是00:17。
1578 0
|
JavaScript 前端开发
|
API 数据库 Python
系统的了解DJANGO中数据MODULES的相关性引用
数据库结构如下: from django.db import models class Blog(models.Model): name = models.CharField(max_length=100) tagline = models.
900 0