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代码
Mar 13 Python
windows下python和pip安装教程
May 25 Python
python中的变量如何开辟内存
Jun 26 Python
python实现机器学习之元线性回归
Sep 06 Python
python处理multipart/form-data的请求方法
Dec 26 Python
在python中画正态分布图像的实例
Jul 08 Python
pytorch 模型的train模式与eval模式实例
Feb 20 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
Mar 16 Python
python新手学习使用库
Jun 11 Python
Python 如何创建一个线程池
Jul 28 Python
python+django+selenium搭建简易自动化测试
Aug 19 Python
Python 中 Shutil 模块详情
Nov 11 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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
J2EE中常用的名词进行解释
2015/11/09 面试题
医药专业推荐信
2013/11/15 职场文书
应届大学生求职的自我评价
2013/11/17 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
2015年档案室工作总结
2015/05/23 职场文书
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android