-------------------tinymce富文本编辑器
1、下载安装
1、在网站pypi网站搜索并下载"django-tinymce-2.4.0"

2、解压：tar zxvf django-tinymce-2.4.0.tar.gz

3、进入解压后的目录，工作在虚拟环境，安装：
python setup.py install

2、应用到项目
1、在settings.py中为INSTALLED_APPS添加编辑器应用
INSTALLED_APPS = (
...
'tinymce',
)

2、在settings.py中添加编辑配置项
TINYMCE_DEFAULT_CONFIG = {
'theme': 'advanced',
'width': 600,
'height': 400,
}

3、在根urls.py中配置
urlpatterns = [
...
url(r'^tinymce/', include('tinymce.urls')),
]

4、在应用中定义模型的属性
from django.db import models
from tinymce.models import HTMLField

class GoodInfo(models.Model):
...
gdetail = HTMLField()

3、自定义使用
1、定义视图editor，用于显示编辑器并完成提交
def editor(request):
return render(request, 'other/editor.html')

2、配置url
urlpatterns = [
...
url(r'^editor/$', views.editor, name='editor'),
]

3、创建模板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="/detail/">
<input type="text" name="hname">
<br>
<textarea name='gdetail'>这是一个富文本编辑器</textarea>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>

4、定义视图detail，接收请求，并更新goodInfo对象
def detail(request):
hname = request.POST['hname']
gdetail = request.POST['gdetail']

goodinfo = GoodInfo.objects.get(pk=1)
goodinfo.hname = hname
goodinfo.gdetail = gdetail
goodinfo.save()

return render(request, 'other/detail.html', {'goods': goodinfo})

5、添加url项
urlpatterns = [
...
url(r'^detail/$', views.detail, name='detail'),
]

6、定义模板detail.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
姓名：{{goods.gname}}
<hr>
{%autoescape off%}
{{goods.gdetail}}
{%endautoescape%}
</body>
</html>

django富文本编辑器的更多相关文章

  1. django 富文本编辑器

    创建工程,数据中数据格式设置为 models.TextField() 此时编辑器是普通的文本框. 使用 tinymce .安装 django-tinymce pip install django-ti ...

  2. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

  3. Django配置富文本编辑器kindeditor

    一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...

  4. Django xadmin后台添加富文本编辑器UEditor的用法

    效果图: 步骤: 1.利用命令:pip install DjangoUeditor,安装DjangoUeditor,但由于DjangoUeditor没有python3版本的,从的Github上把修改好 ...

  5. django—xadmin中集成富文本编辑器ueditor

    一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...

  6. Django 之 富文本编辑器-tinymce

    这里的富文本编辑器以 tinymce 为例. 环境:ubuntu 16.04 + django 1.10 + python 2.7 ubuntu安装tinymce: python 2.7 $ sudo ...

  7. 给Django后台富文本编辑器添加上传文件的功能

    使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...

  8. Django之富文本编辑器kindeditor 及上传

    1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...

  9. Django 插件之 Xadmin实现富文本编辑器

    此文为前一篇文章的续写: Django 插件之 Xadmin Ueditor 介绍 UEditor 是由百度 web 前端研发部开发所见即所得富文本 web 编辑器,具有轻量,可定制,注重用户体验等特 ...

随机推荐

  1. 【javascript】数组的操作

    一.常用操作 toString():把数组转换成一个字符串  toLocaleString():把数组转换成一个字符串  join():把数组转换成一个用符号连接的字符串  shift():将数组头部 ...

  2. Linux shell 自定义函数

    一.定义shell函数(define function) 语法: [ function ] funname [()] { action; [return int;] } 说明: 1.可以带functi ...

  3. 跨主机网络概述 - 每天5分钟玩转 Docker 容器技术（48）

    前面已经学习了 Docker 的几种网络方案:none.host.bridge 和 joined 容器,它们解决了单个 Docker Host 内容器通信的问题.本章的重点则是讨论跨主机容器间通信的方 ...

  4. 朋友的发展--->对自己深深地激励。

    从4月5号来厦门开始实习到现在,也断断续续的跟着大佬开始实现需求了,就记录下自己这一段时间的想法吧,可能未来的自己看来会觉得挺可笑的,这个春招,说实话,自己挺失败的,为了求稳,来厦门这边面试美团,以至 ...

  5. Android学习笔记-EditText(输入框)(二)

    6.控制EditText四周的间隔距离与内部文字与边框间的距离 我们使用margin相关属性增加组件相对其他控件的距离,比如android:marginTop = "5dp" 使用 ...

  6. Spark No FileSystem for scheme file 解决方法

    在给代码带包成jar后,放到环境中运行出现如下错误: Exception in thread "main" java.io.IOException: No FileSystem f ...

  7. [补档][Tvyj 1729]文艺平衡树

    [Tvyj 1729]文艺平衡树 题目 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结 ...

  8. h5 录音

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  9. 67. Add Binary【LeetCode】

    67. Add Binary Given two binary strings, return their sum (also a binary string). For example,a = &q ...

  10. C#设计模式(3)-工厂方法模式

    引言 上一篇介绍了设计模式中的简单工厂模式-C#设计模式(2)-简单工厂模式,本篇将介绍工厂方法模式,在简单工厂模式下进行改造: 工厂方法模式简介 工厂方法(FactoryMethod)模式:定义一个 ...