富文本

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