Django之富文本(获取内容,设置内容方式)


Posted in Python onMay 21, 2020

富文本

1、Rich Text Format(RTF)

微软开发的跨平台文档格式,大多数的文字处理软件都能读取和保存RTF文档,其实就是可以添加样式的文档,和HTML有很多相似的地方

图示

Django之富文本(获取内容,设置内容方式)

2、tinymce插件

安装插件

pip install django-tinymce

配置插件

使用

后台管理中

HTMLField

页面中使用

textarea

3、在后台管理中使用

配置settings.py文件

INSTALLED_APPS 添加 tinymce 应用
INSTALLED_APPS = [
  ...
  # 注册富文本应用
  'tinymce',
]

添加默认配置

# 以字典形式配置富文本框架tinymce

# 作用于管理后台中的富文本编辑器

TINYMCE_DEFAULT_CONFIG = {

  # 使用高级主题,备选项还有简单主题
  'theme': 'advanced',
  # 'theme': 'simple',

  # 必须指定富文本编辑器(RTF=rich text format)的宽高
  'width': 800,
  'height': 600,

  # 汉化
  'language': 'zh',

  # 自定义常用的固定样式
  'style_formats': [
    # title=样式名称
    # styles=自定义css样式
    # inline:xxx = 将加样式后的文本放在行内元素中显示
    # block:xxx = 将加样式后的文本放在块级元素中显示
    {'title': 'Bold text', 'inline': 'b'},
    {'title': 'Red text', 'inline': 'span', 'styles': {'color': '#ff0000'}},
    {'title': 'Red header', 'block': 'h1', 'styles': {'color': '#ff0000'}},
    {'title': 'Example 1', 'inline': 'span', 'classes': 'example1'},
    {'title': 'Example 2', 'inline': 'span', 'classes': 'example2'},
    {'title': 'Table styles'},
    {'title': 'Table row 1', 'selector': 'tr', 'classes': 'tablerow1'}
  ],
}

创建模型类

from tinymce.models import HTMLField
class Blog(models.Model):
 sBlog = HTMLField()

注册模型

admin.site.register

4、在普通页面使用

使用文本域盛放内容

<form method='post' action='url'>
<textarea></textarea>
</form>

添加脚本

<script src='/static/tiny_mce/tiny_mce.js'></script>
 <script>
   tinyMCE.init({
     'mode': 'textareas',
     'theme': 'simple',
     'theme': 'advanced',
     'width': 800,
     'height': 600,
     'language': 'zh',
     'style_formats': [
       {'title': 'Bold text', 'inline': 'b'},
       {'title': 'Red text', 'inline': 'span', 'styles': {'color': '#ff0000'}},
       {'title': 'Red header', 'block': 'h1', 'styles': {'color': '#ff0000'}},
       {'title': 'Example 1', 'inline': 'span', 'classes': 'example1'},
       {'title': 'Example 2', 'inline': 'span', 'classes': 'example2'},
       {'title': 'Table styles'},
       {'title': 'Table row 1', 'selector': 'tr', 'classes': 'tablerow1'}
     ],
   })
 </script>

本质上还是使用html的样式。

5、利用js获取富文本内容和设置内容给富文本

//editorId是富文本的id
function SetTinyMceContent(editorId, content) {
  //给富文本编辑器设置内容
  tinyMCE.getInstanceById(editorId).getBody().innerHTML = content;
  //获取富文本编辑器的内容
  var con = tinyMCE.getInstanceById(editorId).getBody().innerHTML;
}

补充知识:Django中Form的Textarea字段

开始以为是这个样子:

class BlogForm(forms.Form): 
  title  = forms.CharField(required = True) 
  content = forms.Textarea()

查看文档发现是:

from django import forms 
class BlogForm(forms.Form): 
  title  = forms.CharField(required = True) 
  content = forms.CharField(widget=forms.Textarea)

以上这篇Django之富文本(获取内容,设置内容方式)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python常见文件操作的函数示例代码
Nov 15 Python
零基础写python爬虫之爬虫的定义及URL构成
Nov 04 Python
Python实现简单HTML表格解析的方法
Jun 15 Python
Python简单实现enum功能的方法
Apr 25 Python
Python实现图片转字符画的示例代码
Aug 21 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
Jul 09 Python
Python中正则表达式的用法总结
Feb 22 Python
Python基础之函数的定义与使用示例
Mar 23 Python
如何用Python来搭建一个简单的推荐系统
Aug 07 Python
python实现吃苹果小游戏
Mar 21 Python
如何使用Cython对python代码进行加密
Jul 08 Python
Python异常处理机制结构实例解析
Jul 23 Python
使用Python防止SQL注入攻击的实现示例
May 21 #Python
Django的ListView超详细用法(含分页paginate)
May 21 #Python
Django中FilePathField字段的用法
May 21 #Python
Django 解决上传文件时,request.FILES为空的问题
May 20 #Python
使用 django orm 写 exists 条件过滤实例
May 20 #Python
django 解决自定义序列化返回处理数据为null的问题
May 20 #Python
python实现126邮箱发送邮件
May 20 #Python
You might like
使用 MySQL Date/Time 类型
2008/03/26 PHP
获取远程文件大小的php函数
2010/01/11 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
javascript基础知识
2016/06/07 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
关于vuex的学习实践笔记
2017/04/05 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
JS如何生成动态列表
2020/09/22 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
用python生成1000个txt文件的方法
2018/10/25 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
用python实现一个简单的验证码
2020/12/09 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
大学生就业自荐信
2013/10/26 职场文书
法律工作求职自荐信
2013/10/31 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
合同范本之电脑出租
2019/08/13 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL