类别：python / 日期：2018-03-09 / 浏览：5982 / 评论：0
0、前言：
期初使用的Kendo UI控件中的Editor作为文本编辑器，虽然Editor控件支持上传图片，但是由于配置的复杂性暂时放弃了（Kendo UI的控件功能太强大了）。
django-ckeditor 的使用方法更侧重于在form.py里定义后绑定到前台使用，我们更期望的是不安装包，直接引入js后使用。
这里使用的环境为 python 3.6 + django 2.02，基于tinyMCE控件。
1、引入必要js
从 https://www.tinymce.com/download/ 下载tinyMCE的社区版
从 https://www.tinymce.com/download/language-packages/ 下载汉化文件，放到langs目录中
引入项目：
<script type="text/javascript" src="{% static "vendor/tinymce/tinymce.min.js" %}"></script>2、配置settings.py
配置Media_root，提供上传图片保存位置：
MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'upload')
3、html页面修改
创建一个隐藏的文件上传按钮：
<input type="file" id="imageFileUpload" style="display: none">
配置tinyMCE：
tinyMCE.init({
selector: 'textarea',
theme: "modern",
plugins: "spellchecker,directionality,paste,image",
file_browser_callback_types: 'image',
file_picker_callback: function(callback, value, meta) {
if (meta.filetype === 'image') {
var fileUploadControl = document.getElementById("imageFileUpload");
fileUploadControl.click();
fileUploadControl.onchange = function () {
if (fileUploadControl.files.length > 0) {
var localFile = fileUploadControl.files[0];
if (/.(gif|jpg|jpeg|png|bmp)$/.test(localFile.name)){
var formData = new FormData();
formData.append("image", localFile);
$.ajax({
url: '{% url 'upload_img' %}',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (data) {
callback(data, {alt: localFile.name});
},
error:function () {
alert('图片上传失败')
}
});
}
else {
alert('只能上传图片')
}
} else {
alert('请选择图片上传')
}
}
}
},
convert_urls :false,
language: "zh_CN",
image_advtab: true,
paste_data_images:true
});这里需要说明的是 convert_urls 参数默认为true，会使得我们的相对路径在保存后自动转换，导致下次打开后就不能显示图片了。callback方法第一个参数是设置返回的图片路径。
4、view.py 修改
这里主要是加一个方法接收上传的文件。
from django.conf import settings
from django.views.decorators.csrf import csrf_exempt
from PIL import Image
@csrf_exempt
def report_upload(request):
try:
file = request.FILES['image']
img = Image.open(file)
try:
file_name = str(uuid.uuid1()).replace("-", "") + os.path.splitext(file.name)[1]
img.save(os.path.join(settings.MEDIA_ROOT, "imgs", file_name), img.format)
return HttpResponse(settings.MEDIA_URL + 'imgs/{0}'.format(file_name))
except Exception:
return HttpResponse("error")
except Exception:
return HttpResponse("error")这里要说明的是使用settings.MEDIA_ROOT中的参数作为保存路径，使用Image对象可以对图片做一些处理后再保存。
5。结果
点击编辑器的插入图片按钮，再点击地址栏后面的图标，选择文件就可以上传了，结果测试成功。
发表评论 /