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函数返回多个值的示例方法
Dec 04 Python
浅析Python中的多条件排序实现
Jun 07 Python
Python正则抓取新闻标题和链接的方法示例
Apr 24 Python
python2.6.6如何升级到python2.7.14
Apr 08 Python
Python 实现在文件中的每一行添加一个逗号
Apr 29 Python
python实现停车管理系统
Nov 30 Python
基于python3监控服务器状态进行邮件报警
Oct 19 Python
python 解决tqdm模块不能单行显示的问题
Feb 19 Python
Python包资源下载路径报404解决方案
Nov 05 Python
浅谈Selenium 控制浏览器的常用方法
Dec 04 Python
call在Python中改进数列的实例讲解
Dec 09 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
Feb 01 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
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
微信小程序开发探究
2016/12/27 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
python搜索指定目录的方法
2015/04/29 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
python 编码规范整理
2018/05/05 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
师范大学应届生求职信
2013/11/21 职场文书
初中女生自我鉴定
2013/12/19 职场文书
文秘大学生求职信
2014/02/25 职场文书
实习单位评语
2014/04/26 职场文书
质量保证书范本
2014/04/29 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
画展观后感
2015/06/17 职场文书
八年级语文教学反思
2016/03/03 职场文书