Django之富文本编辑器

使用后台进行文章或者详情编辑时，可以能需要再文章中插入图片或者链接，这个时候单纯的文本已经不 满足需求，需要使用 富文本编辑器进行操作(类似一个博客):

 本项目采用的富文本编辑器为 tinymce,文档地址：http://tinymce.ax-z.cn/

首先先安装django-tinymce库，cmd命令:pip install django-tinymce   或者在pycharm中自行安装

找到自己创建的项目下的项目的settings.py-----这里我创建的项目是protest,所以路径是protest>>protest>>settings.py,配置settings 的 INSTALLED_APPS 中的 tinymce

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tinymce',  # 富文本编译
    'myapp'
]

还是在settings.py下，添加 tinymce 的默认配置

需要在tinymce 的配置中配置图片的图标和插件，即在 plugins 和 toobar 中引入 image

(就是>>>'images_upload_url': '/uploadimg',   # 图片上传处理视图 )

TINYMCE_DEFAULT_CONFIG = {
    'theme':'silver',   # 主题
    'language':'zh_CN',     # 语言
    'menubar':'edit format',    # 菜单栏
    'plugins':'lists,advlist bold underline alignleft aligncenter alignright fontselect fontsizeselect code image link table',
    'toolbar':'bullist numlist bold underline alignleft aligncenter alignright fontselect fontsizeselect code image link table',
    'images_upload_url': '/uploadimg',   # 图片上传处理视图
    'width':'600',  # 富文本编辑器的宽
    'height':'400',  # 富文本编辑器的高
}

---

这里配置还不够完善，可以根据自己的需求去配置。

---

接着补充配置urls.py(protest>>protest>>urls.py)

# 库要增加include
from django.conf.urls import url,include

url(r"^tinymce/",include('tinymce.urls'))

---

在模板类中引入 HTMLField,应用在models.py(protest>>myapp>>models.py)中

from tinymce.models import HTMLField
class AuthorInfo(BaseModel):
    # 作者名
    aname = models.CharField(verbose_name='作者',max_length=30)
    # 性别
    agender = models.BooleanField(verbose_name='性别',default=True)
    # 简介
    # acontent = models.CharField(verbose_name='简介',max_length=200)
    acontent = HTMLField('简介',max_length=300)
    abook = models.ForeignKey('BookInfo',verbose_name='相关书籍')

注：myapp是我已经创建好的应用名，命名可以随意

创建应用：应用可以看成为项目的子模块，以我的项目protest项目为例

cd protest>>>(protest目录下)

创建应用代码：python manage.py startapp myapp

(记得每注册一个应用模块,项目下的settings.py都要修改

INSTALLED_APPS = [
        'myapp',        
])

---

另外，还需要配置上传资源路径

django 的 media 文件地址的设置其实是类似于 static 文件地址的设置。

media 主要是用来存放一些用户上传的文件（头像、图片等）

protest>>>(自己创建命名的)static>>>(创建文件夹目录)media

返回protest>>protest>>settings.py,配置settings 

STATIC_URL = '/static/'
# 配置静态资源
STATICFILES_DIRS = [os.path.join(BASE_DIR,"static"),]

# 对于用户上传的资源
# 访问上传资源的路由
MEDIA_URL = '/media/'
# 存储上传资源的路径
MEDIA_ROOT = os.path.join(BASE_DIR,"static/media")

接着补充配置urls.py(protest>>protest>>urls.py)

from django.conf.urls.static import static

urlpatterns += static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)

 接着更改视图函数(一般urls和视图都是一致的，修改了其中之一另一个也需要修改)

protest>>>myapp>>>views.py

def uploadimg(request):
    imgObj = request.FILES.get('file')
    from django.conf import settings
    fname = os.path.join(settings.MEDIA_ROOT, imgObj.name)

    with open(fname, "wb") as rfile:
        data = imgObj.file.read()
        rfile.write(data)
    return JsonResponse({
        "location": 'static/media/' + imgObj.name
    })

一般就可以跑起来了，启动命令:python manage.py runserver

---

 在运行 python manage.py runserver 时候也许会报错出现以下情况:

from django.urls import path

from tinymce import views

urlpatterns = [
    path("spellchecker/", views.spell_check, name="tinymce-spellcheck"),
    path("flatpages_link_list/", views.flatpages_link_list, name="tinymce-linklist"),
    path("compressor/", views.compressor, name="tinymce-compressor"),
    path("filebrowser/", views.filebrowser, name="tinymce-filebrowser"),
]

(tinymce.url.py)不是我们自己创建的而是系统模板中的，原因是这里安装的Django版本是1.11.28，而 path 支持的是2.X以后的版本，我们需要自行修改，代码如下:

# Copyright (c) 2008 Joost Cassee
# Licensed under the terms of the MIT License (see LICENSE.txt)
from django.conf.urls import url

from tinymce import views

urlpatterns = [
    url("spellchecker/", views.spell_check, name="tinymce-spellcheck"),
    url("flatpages_link_list/", views.flatpages_link_list, name="tinymce-linklist"),
    url("compressor/", views.compressor, name="tinymce-compressor"),
    url("filebrowser/", views.filebrowser, name="tinymce-filebrowser"),
]

 不同点在于导入模块和(修改path->url)

 有兴趣的朋友们可以自行操作