解决tinymce添加本地图片问题

本文介绍如何在Django中解决TinyMCE编辑器添加本地图片的问题。通过前端上传图片到后端,后端存储图片并返回JS填充图片URL,最终将图片显示在文本框中。后续优化方向包括将图片存储到media目录及改善用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

##解决思路:
前端添加一个form,form中包含一个input来选择本地图片,form提交本地图片到server端。
后端接收图片,将图片存储到server上,之后返回一段js,js的作用是填写图片的url,之后出发完成按钮,显示图片到textarea中。
##实现:
###前端html




<scriptsrc=“http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js”>
利用jquery来完成form上传等

###后端view处理:
from django.http import HttpResponse
from django.shortcuts import render
from django.views.decorator.csrf import csrf_exempt
from PIL import Image

def index(request):
          return render(request, 'upload_img/index.htm')

@csrf_exempt
def upload(request):
     try:
          file = request.FILES['image']
          form提交的文件的名字,上面html里面的name
          img = Image.open(file)
          img.thumbnail((500, 500), Image.ANTIALIAS)
          img.save('/home/andy-geng....'+file.name, img.format)
          图片的name和format都是动态获取的,支持png,jpeg,gif等
     except Exception, e:
          return HttpResponse('error %s' % e)
    path = '/site_media/'+file.name
    return HttpResponse("<script>top.$('.mce-btn.mce-open').parent().find('.mce-textbox').val('%s').closest('.mce-window').find('.mce-primary').click();</script>" % path)
      
添加url来获取后端图片,供页面显示:
from upload_img import views
 urlpatterns = [
url(r'^$', views.index, name='index'),
url(r'upload/$', views.upload, name='upload_img'),
url(r'^site_media/(?P<path>.*)', 'django.views.static.serve', {'document_root': '/home/andy-geng/....'})
]

这样就完成了图片form上传,后端接收存储,返回js完成前端填写url,支持前端获取图片。整个过程ok。

##日后改进:
图片存储应该能存储到media目录中,了解django的存储,再修改。
返回的js如果能仅填写url到图片选择框,而不触发完成按钮,然后用户可以填写描述和大小,之后在手动点击完成来显示图片就更好了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值