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

借助富文本编辑器，管理员能够编辑出来一个包含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 HTMLFieldclass 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 = hnameheroinfo.hcontent = hcontentheroinfo.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>

Django 第三方引用富文本编辑器6.1相关推荐

Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器一.安装及基本配置官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
Django 3.2.5博客开发教程:使用富文本编辑器添加数据
在Django admin后台添加数据的时候,文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码,这十分吃力,也没法上传图片和文件.这显然不是我等高大上程序猿想要的. 为提升效率,我们可以使 ...
Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
Django-使用富文本编辑器
title: Django-使用富文本编辑器 copyright: true top: 0 date: 2019-07-14 19:57:15 tags: categories: WEB 后端框架 p ...
django快速集成富文本编辑器wangeditor
django快速集成富文本编辑器wangeditor django是python栈一款优秀的web开发框架,也是python栈web开发框架中使用占比最高的开发框架,至于其是否足够优秀不言自明,自带的 ...
vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
CSDN使用富文本编辑器为所发布的文章生成右侧目录
如果我们想为我们的文章生成相应的目录,在不使用MD编辑器的情况下,我们使用富文本编辑器也是可以为我们的文章生成目录(特别提醒:最少需设置4个标题这样才能看出效果).我们可以假设需要发布的文章已经编辑好 ...
微信小程序-后台使用富文本编辑器返回数据，小程序编译富文本编辑器返回的数据
最近遇到一个功能,后台管理系统添加商品的时候,商品详情是使用富文本编辑器添加的.小程序获取的商品详情数据是含有<p>标签的. 后台管理系统百度了多种方法,也试用了很多方法,最终觉得wxP ...
小程序使用富文本编辑器以及使用wxParse解析html结构
小程序使用富文本编辑器以及使用wxParse解析html结构 13小程序发布文章功能(富文本编辑器的使用和解析html结构数据的wxParse)

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

Django 第三方引用富文本编辑器6.1相关推荐

最新文章

热门文章