借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面。此处以tinymce为例,其它富文本编辑器的使用也是类似的。

在虚拟环境中安装包。

pip install django-tinymce==2.6.0

安装完成后,可以使用在Admin管理中,也可以自定义表单使用。

示例

1)在主settings.py中为INSTALLED_APPS添加编辑器应用。

INSTALLED_APPS = (
...
'tinymce',
)

2)在主settings.py中添加编辑器配置。

TINYMCE_DEFAULT_CONFIG = {
'theme': 'advanced',
'width': 600,
'height': 400,
}

3)在t主urls.py中配置编辑器url。

urlpatterns = [
...
url(r'^tinymce/', include('tinymce.urls')),
]

接下来介绍在Admin页面、自定义表单页面的使用方式。

在Admin中使用

1)在goods/models.py中,定义模型的属性为HTMLField()类型。

from django.db import models
from tinymce.models import HTMLField class GoodsInfo(models.Model):
gcontent=HTMLField()

2)生成迁移文件。

python manage.py makemigrations

3)执行迁移。

python manage.py migrate

4)在本示例中没有定义其它的模型类,但是数据库中有这些表,提示是否删除,输入no后回车,表示不删除,因为其它的示例中需要使用这些表。

5)迁移完成,新开终端,连接mysql,使用test2数据库,查看表如下:

6)发现并没有表GoodsInfo,解决办法是删除迁移表中关于booktest应用的数据。

delete from django_migrations where app='booktest';

7)再次执行迁移。

python manage.py migrate

成功完成迁移,记得不删除no。

8)在booktest/admin.py中注册模型类GoodsInfo

from django.contrib import admin
from booktest.models import *
class GoodsInfoAdmin(admin.ModelAdmin):
list_display = ['id'] admin.site.register(GoodsInfo,GoodsInfoAdmin)

9)运行服务器,进入admin后台管理,点击GoodsInfo的添加,效果如下图

在编辑器中编辑内容后保存。

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

  1. 富文本编辑器Simditor的简易使用

    最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...

  2. 个人网站对xss跨站脚本攻击(重点是富文本编辑器情况)和sql注入攻击的防范

    昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...

  3. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  4. PHP Ueditor 富文本编辑器

    2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...

  5. JavaScript 富文本编辑器

    WEB项目中使用UEditor(富文本编辑器) UEditor - 完整示例 http://ueditor.baidu.com/website/onlinedemo.html UEditor注意事项: ...

  6. MVC 使用 Ueditor富文本编辑器

    一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...

  7. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

  8. web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

    前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...

  9. 富文本编辑器防止xss注入javascript版

    富文本编辑器:ueditor 其实富文本编辑器已经有防止xss注入功能,但是你服务端程序在接收的时候在做一次转义,否则有可能然后前端验证直接提交数据导致被xss攻击. 为了节省后端程序开销则在前端 显 ...

  10. 对于MVC中应用百度富文本编辑器问题的解决办法

    1.对于应用富文本编辑器post提交表单内容提示有危险的解决办法: [ValidateInput(false)] //文本编辑器的表单提交不用提示危险 [HttpPost] public Action ...

随机推荐

  1. 精通react之react-router4源码分析(100代码实现router功能)

    1.react-router4 是一个 react 组件 通过和 location / histroy 结合,来显示页面不同URL对应显示不同的组件 其中包含了三种路由.hash / boswer 等 ...

  2. Python 入门(2):数据类型

    一 Number(数字) 1.1 数字类型的创建 a = 10 b = a b = 5 print(a) 10 print(b) 5 1.2 Number 类型转换 a = 5.2 b = 5 c = ...

  3. (十一)pdf的构成之文件尾

    件尾部(trailer)如何找到交叉引用表和其他特殊对象 属性: / Size [integer]:指定交叉引用表中的条目数(也计算更新部分中的对象).使用的数字不应是间接参考. / Prev [in ...

  4. MongoDB 概述

    一.概述: 1.NoSQL数据库(非关系型数据库) 2.文档存储 3.格式类似JSON,BSON 4.最终一致性(非ACID) , CAP定理(C 一致性,A 高可用,P 分区性) 5.高可扩展性(分 ...

  5. centos7搭建gitlab仓库

    在有一些企业里会搭建属于自己的代码仓库,只能内网访问,所以说今天在centos7中搭建了一个gitlab仓库,大家也可以搭建一个玩一玩.呵呵 1.首先安装依赖软件包和开启ssh服务: sudo yum ...

  6. drf中的各种view,viewset

    drf中的各种view,viewset Django REST framework里有各种各样的view,让我有点蒙,得好好捋一捋这关系. 视图的作用 Django用"视图"这个概 ...

  7. MyBatis返回结果类型为Boolean

    问题描述:        在使用MyBatis时,有时需要检查某个记录是否存在数据库中,然后根据其返回的布尔值true or false,来进行逻辑判断.那怎么做呢? 解决方案: 如检测某个手机号是否 ...

  8. C# 的ToString 常用方法

    货币 2.5.ToString("C") ¥2.50 D 十进制数 25.ToString("D5") 00025E 科学型 25000.ToString(&q ...

  9. linq根据英文首字母姓名排序

    names.Sort((a, b) => a.name.CompareTo(b.name));

  10. Spring Security 解析(二) —— 认证过程

    Spring Security 解析(二) -- 认证过程   在学习Spring Cloud 时,遇到了授权服务oauth 相关内容时,总是一知半解,因此决定先把Spring Security .S ...