Django学习18 -- 富文本编辑器（Rich Edit）

1. 富文本编辑器，Rich Edit

• CharField，单行文本（Django默认）

• TextField，多行文本（Django默认）

• 富文本编辑器是能显示（编辑）图文效果的输入控件

2. Django支持的富文本编辑器

• CKEditor

-即FCKeditor（文本编辑器），一款功能强大的开源在线文本编辑器，所见即所得。基于 JavaScript 开发，在 Web 上实现类似于 Microsoft Word 的强大的功能，不必在客户端安装，兼容各大主流浏览器。参考，

*CKEditor Ecosystem

*收藏 微信 CKEditor 简介

-安装ckeditor：pip install django-ckeditor

-安装js_asset：pip install django-js-asset

-注册 ckeditor

INSTALLED_APPS = [
    ......
    'ckeditor',  # rick edit
    ......
]

-配置 Configuration -- All editor features

// This is actually the default value.
config.toolbar_Full =
[
    { name: 'document',    items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
    { name: 'clipboard',   items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    { name: 'editing',     items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
    { name: 'forms',       items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
    { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
    { name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
    { name: 'insert',      items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
    '/',
    { name: 'styles',      items : [ 'Styles','Format','Font','FontSize' ] },
    { name: 'colors',      items : [ 'TextColor','BGColor' ] },
    { name: 'tools',       items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

-settings.py设置

## CKEDITOR_CONFIGS = {......}
## ...\ckeditor\configs.py
DEFAULT_CONFIG = {
    "skin": "moono-lisa",
    "toolbar_Basic": [["Source", "-", "Bold", "Italic"]],
    "toolbar_Full": [
        [
            "Styles",
            "Format",
            "Bold",
            "Italic",
            "Underline",
            "Strike",
            "SpellChecker",
            "Undo",
            "Redo",
        ],
        ["Link", "Unlink", "Anchor"],
        ["Image", "Flash", "Table", "HorizontalRule"],
        ["TextColor", "BGColor"],
        ["Smiley", "SpecialChar"],
        ["Source"],
    ],
    "toolbar": "Full",
    "height": 291,
    "width": 835,
    "filebrowserWindowWidth": 940,
    "filebrowserWindowHeight": 725,
}

-示例

-参考

*在django中配置富文本编辑器

*CKEditor

*CKEditor 3 JavaScript API Documentation

• WangEditor

-国人开发的一款非常优秀的富文本编辑器，开源 Web 富文本编辑器

-安装：pip install django-wangeditor

-注册 wangeditor（INSTALLED_APPS）

INSTALLED_APPS = [
    ......
    'wangeditor' # rich edit, wangeditor
    ......
]

from wangeditor.fields import WangRichTextField

rich_edit_box = WangRichTextField('RichEdit', max_length=1000, )

# Error: cannot import name 'force_text' from 'django.utils.encoding'
# Solution：settings.py添加
import django
from django.utils.encoding import force_str
django.utils.encoding.force_text = force_str

-参考

*wangEditor

-示例

• DjangoUeditor -- Python3 / Django 4支持不好，不能正常调试

-百度开源的在线HTML编辑器

-安装：pip install djangoueditor

-编译错误

# from widgets import UEditorWidget,AdminUEditorWidget
# ModuleNotFoundError: No module named 'widgets'
# 只支持python 2.7, 不支持python 3.X。需要从Git Hub下载最新3版本
# DjangoUeditor3 -- https://github.com/twz915/DjangoUeditor3
                 -- https://gitcode.net/mirrors/twz915/djangoueditor3?utm_source=csdn_github_accelerator
                 -- https://blog.csdn.net/m0_67138207/article/details/125028085

-pip install django-ueditor（什么东东？）

from django.utils.encoding import smart_text
# Django 4.0中删除功能，django.utils.encoding.force_text() 和 smart_text() 被移除
# INSTALLED_APPS，设置并替换 smart_text -> smart_str
import django
from django.utils.encoding import smart_str
django.utils.encoding.smart_text = smart_str

• TinyMCE -- Python3 / Django 4支持不好，不能正常调试

-可视化HTML编辑器。参考，

*GitHub - TinyMCE

*TinyMCE 可视化 HTML 编辑器

-安装：pip install django-tinymce（pip install -i https://pypi.tuna.tsinghua.edu.cn/simple xx）

-注册 tinymce（INSTALLED_APPS）

-ERROR

>> Issue 1: django.core.urlresolvers -> django.urls 
# from django.core.urlresolvers import reverse
# ModuleNotFoundError: No module named 'django.core.urlresolvers'

# django2.0 将 django.core.urlresolvers 包 更改为了 django.urls 包

# ...\tinymce\views.py
##from django.core import urlresolvers
from django import urls

# ...\tinymce\widgets.py
##from django.core.urlresolvers import reverse
from django.urls import reverse

>> Issue 2: flatatt 
# ...\tinymce\widgets.py
##from django.forms.widgets import flatatt
ImportError: cannot import name 'flatatt' from 'django.forms.widgets'

>> Issue 3: baseurl 
# ...\tinymce\settings.py
##from utils import baseurl
from tinymce.utils import baseurl

-参考：

*富文本编辑器 tinymce

*TinyMCE 中文文档

3. 文件参考：

• django什么富文本编辑器好用（django富文本编辑器哪个好） - 首席CTO笔记

• pip install -i https://pypi.tuna.tsinghua.edu.cn/simple