图文混排
表字段用TextFiled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="/static/admin/js/jquery-1.12.4.min.js"></script>
<script src="/static/admin/tinymce/js/tinymce/tinymce.min.js"></script>
<script src="/static/admin/js/tinymce_setup.js"></script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
作者：<input type="text" name="author"><br>
数量：<input type="text" name="number"><br>
内容：<div id="rich_content"></div> #传的是js里的
图片：<input type="file" name="img"><br>
<button type="submit">提交</button>
</form>
</body>
</html>
修改 tinymce_setup.js：
tinymce.init({
//选择class为content的标签作为编辑器
selector: '#rich_content',
//方向从左到右
directionality:'ltr',
//语言选择中文
language:'zh_CN',
//高度为400
height:400,
width: '100%',
//工具栏上面的补丁按钮
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality template paste textcolor',
'codesample imageupload',
],
//工具栏的补丁按钮
toolbar: 'insertfile undo redo | \
styleselect | \
bold italic | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | \
link image | \
print preview media fullpage | \
forecolor backcolor emoticons |\
codesample fontsizeselect fullscreen |\
imageupload',
//字体大小
fontsize_formats: '10pt 12pt 14pt 18pt 24pt 36pt',
//按tab不换行
nonbreaking_force_tab: true,
imageupload_url: "/twhp/submit_image/"
});
from django.shortcuts import render
from pt_user.models import *
from master_ptmag_pro import settings
import os,json
from django.http import HttpResponse
def book(request):
if request.method=='POST':
author=request.POST.get('author')
number=request.POST.get('number')
rich_content=request.POST.get('rich_content')
img=request.FILES.get('img')
uploadfile(img)
add=Book(author=author,number=number,content=rich_content,img='/upload/'+img.name)
add.save()
return render(request,'twhp/book.html')
# 封装
def uploadfile(img):
f=open(os.path.join(settings.UPLOAD_ROOT,'',img.name),'wb')
# 写文件 遍历图片文件流
for chunk in img.chunks():
f.write(chunk)
# 关闭文件流
f.close()
#图片提交
def submit_image(request):
file=request.FILES.get('file')
uploadfile(file)
mes={}
mes['path']='/upload/'+file.name
mes['error']=False
return HttpResponse(json.dumps(mes))
在项目url.py中配制
from master_ptmag_pro.settings import UPLOAD_ROOT
from django.views.static import serve
re_path('^upload/(?P<path>.*)$',serve,{'document_root':UPLOAD_ROOT}),
path('book/',twhp.book),
path('twhp/submit_image/',twhp.submit_image)
settings配置：
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
# 上传图片
UPLOAD_ROOT = os.path.join(BASE_DIR,'upload')
