Django实战-番外篇-tinymce富文本编辑器

小团子

发布于 2019-07-18 16:13:59

9060

发布于 2019-07-18 16:13:59

文章被收录于专栏：数据云团

富文本编辑器在 web应用中使用广泛，比如 markdown、ueditor 等，像这些编辑器都有集成在 python 和 django 的第三方包。

① 安装 tinymce

环境：ubuntu 16.04 + django 2.0 + python 3.5

python 3

sudo pip install django-tinymce

② 配置 tinymce

在 django 项目的 settings.py 文件的 INSTALLED_APPS

以本次电商项目为例：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tinymce',
    "cart",
    "goods",
    "orders",
    "users",
]

③ 作为 admin 中的应用

配置参数

# tinymce配置参数
TINYMCE_DEFAULT_CONFIG = {
    'theme': 'advanced',
    'width': 600,
    'height': 400,
}

这里的 width 和 height 只能控制在 admin 中的大小，不能控制在视图中的大小。

③ tinymce 主路由配置

需要在项目的主路由中配置 tinymce 的 url

import tinymce.urls

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

④ 在 app 中应用

以本次电商项目的商品应用中的 models.py 商品SPU表为例

from django.db import models
from utils.models import BaseModel
from tinymce.models import HTMLField

class Goods(BaseModel):
    """商品SPU表"""
    name = models.CharField(max_length=100, verbose_name="名称")
    desc = HTMLField(verbose_name="详细介绍", default="", blank=True)

    class Meta:
        db_table = "df_goods"
        verbose_name = "商品"
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.name

改完 models.py 后，记得做数据库迁移

python manage.py makemigrations
python manage.py migrate

⑤ 前端富文本转义

使用形式：{{value | safe}} 意义：当系统设置autoescaping打开的时候，该过滤器使得输出不进行escape转换

⑥ 整合上传图片功能

处理 imageupload_url: '/upload_img/' 上传文件的路径背后的视图处理，根据django的映射规则，在urls.py添加路径：

 # 后台富文本框上传图片
url(r'^upload_img/$', views.upload_img),

添加 views.py 中的处理接收上传的函数 upload_img：

import json
import time
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
from PIL import Image
from django.conf import settings
from django.http import HttpResponse

static_base = 'http://127.0.0.1:8000'
static_url = static_base + settings.MEDIA_URL  # 上传文件展示路径前缀

# 上传图片 POST
@csrf_exempt
def upload_img(request):
    file = request.FILES['file']
    data = {
        'error':True,
        'path':'',
    }
    if file:
        timenow = int(time.time()*1000)
        timenow = str(timenow)
        try:
            img = Image.open(file)
            img.save(settings.MEDIA_ROOT + "content/" + timenow + unicode(str(file)))
        except Exception,e:
            return HttpResponse(json.dumps(data), content_type="application/json")
        imgUrl = static_url + 'content/' + timenow + str(file)
        data['error'] = False
        data['path'] = imgUrl
    return HttpResponse(json.dumps(data), content_type="application/json")

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-06-17，如有侵权请联系 cloudcommunity@tencent.com 删除

django