Django之富文本（获取内容，设置内容）

富文本

1、Rich Text Format（RTF）

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

• 图示
  

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;
}