Django实战-番外篇-tinymce富文本编辑器
富文本编辑器在 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.urlsurl(r'^tinymce/', include(tinymce.urls))
④ 在 app 中应用
以本次电商项目的商品应用中的 models.py 商品SPU表 为例
from django.db import models
from utils.models import BaseModel
from tinymce.models import HTMLFieldclass 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 HttpResponsestatic_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 删除
评论
登录后参与评论
推荐阅读