第十八天 实战练习（5）
今天计划用Python继续一个web开发的实战项目练习，学习项目及练习源码地址：
GitHub源码
文章内容的编写与提交
富文本编辑器
我选择了TinyMCE,原因很简单，用的人多，而且支持的浏览器多，这两个理由足够了。
虽然中文文档比较少，但这个不是重要的，做一个东西，兼容性还是要考虑下的。
使用起步：
首先，需要下载一份copy，
然后：
其次：将TinyMCE初始化为页面的一部分
TinyMCE快速开始示例
最后：数据提交
当form提交时，TinyMCE会将内容塞进textarea，你可以通过正常的post方法获取到编辑器中的内容，行为与普通textarea完全一致。
一个内联示例:
- 在这里输入文字
图片上传
设置初始化参数：images_upload_handler:upload_pic
var upload_pic = function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();//转化为易于理解的file对象
var formData = new FormData();
formData.append('file', file, file.name );//此处与源文档不一样
console.log(formData.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
var config = {
headers: { 'Content-Type': 'multipart/form-data' }
}; //添加请求头
axios.post('/upload', formData, config)
.then(response => {
console.log(response.data);
succFun(response.data.filename);
})
.catch(error=>{
failFun(error)
})
}
图片处理服务端示例:
@post('/upload')
async def storefile(request):
try:
reader = await request.multipart()
file = await reader.next()
exts = ['.jpg','.jpeg','.png','.gif','.bpm']
filename = file.filename if file.filename else 'undefined'
suffix = os.path.splitext(filename)
filename = '{}{}'.format(short_uuid(),suffix[1])
filepath = '{}/{}'.format(config.app.uploaddir,filename)
size = 0
with open(filepath, 'wb') as f:
while True:
chunk = await file.read_chunk() # 默认是8192个字节。
if not chunk:
break
size += len(chunk)
f.write(chunk)
text = {'res': '上传成功','filename':'{}{}'.format('/static/uploads/',filename)}
result = text
return result
except Exception as e:
print(e)
result = {'success':False,'error': e}
return result
文件上传
类似于图片上传，这里不再举例
文档内容的保存
设置初始化参数：save_onsavecallback: saveConent
前端js代码:
var saveConent = function (el) {
// do the work on html
var title = $('#b_title').val();
var content = el.getContent()
var data = {
title: title || "",
content: content || ""
}
console.log(data);
axios.post('/b/0',data)
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
})
}
后端处理:
'''
还没有作入数据库的处理，这里需要用户信息，所以需要处理session判定用户的合法性等
'''
@post('/b/{id}')
async def save_content(*,id,title,content,request):
result = {'success':False}
return result