flask博客项目之tinymce图片上传

时间:2022-12-14 22:04:40

 查看当前的博客发表情况

截图一张立马粘贴进来

flask博客项目之tinymce图片上传

 

 点击发表,显示数据太长

flask博客项目之tinymce图片上传

 

 不断撤退回到刚刚页面

flask博客项目之tinymce图片上传

 

 删除大图,换成小图,上传方式

flask博客项目之tinymce图片上传

 

 点击发表可以成功发表

flask博客项目之tinymce图片上传

 

 数据库中查看,是把图片生成这种编码后字符串方式存储的了,肯定每个图片占了大量空间

flask博客项目之tinymce图片上传

flask博客项目之tinymce图片上传

查看当前的富文本设置

flask博客项目之tinymce图片上传

 

 按照中文网上传

http://tinymce.ax-z.cn/general/upload-images.php

实现图片上传原内容

要使TinyMCE能够上传图片,需要如下几步:

第1步:上传图片,首先要启用图片插件

在plugins参数中把image加进去。

第2步:在工具栏显示图片工具按钮

在toolbar参数中把image加进去。

此时,点图片按钮是没有上传选项的,只能添加图片地址。

第3步:加入配置参数images_upload_url

此参数用于指定一个接受上传文件的后端处理程序地址,例如:

images_upload_url: '/demo/upimg.php',

如果返回的地址是相对路径,还有一个参数images_upload_base_path,可以给相对路径指定它所相对的基本路径。

images_upload_base_path: '/demo',

最后如下方示例:

tinymce.init({
    selector: '#tinydemo',
    language:'zh_CN',
    plugins: 'image',
    toolbar: 'image',
    images_upload_url: '/demo/upimg.php',
    images_upload_base_path: '/demo',
});

 

实现图片上传步骤详情

要使TinyMCE能够上传图片,需要如下几步:

第1步:上传图片,首先要启用图片插件

在plugins参数中把image加进去。

第2步:在工具栏显示图片工具按钮

在toolbar参数中把image加进去。

此时,点图片按钮是没有上传选项的,只能添加图片地址。

第3步:加入配置参数images_upload_url

此参数用于指定一个接受上传文件的后端处理程序地址,例如:

images_upload_url: '/demo/upimg.php',

如果返回的地址是相对路径,还有一个参数images_upload_base_path,可以给相对路径指定它所相对的基本路径。

images_upload_base_path: '/demo',

最后如下方示例:

tinymce.init({
    selector: '#tinydemo',
    language:'zh_CN',
    plugins: 'image',
    toolbar: 'image',
    images_upload_url: '/demo/upimg.php',
    images_upload_base_path: '/demo',
});

flask博客项目之tinymce图片上传

 

 富文本中使用图片链接地址

当没有添加函数时,

flask博客项目之tinymce图片上传

 

 点击上传图片

flask博客项目之tinymce图片上传

 

 这个样子

flask博客项目之tinymce图片上传

 

 我把这个服务器上这个图片的静态访问地址输入进去

flask博客项目之tinymce图片上传

 

 点击保存

flask博客项目之tinymce图片上传

 

 我们保存的是服务器上的一个静态照片的相对路径,然后就会在编辑框里面生成img图片标签,并且src路径是图片的相对静态路径,这样和服务器地址拼在一起,就能显示出图片内容在编辑框里面了

flask博客项目之tinymce图片上传

 

 然后点击发表文章

flask博客项目之tinymce图片上传

 

 点击发表,我们可以从文章里看到这个图片的。因为渲染的是图片地址。

flask博客项目之tinymce图片上传

 

 我们可以从数据库中看到,是插入的图片静态地址

flask博客项目之tinymce图片上传

 

详情页面图片正常显示

flask博客项目之tinymce图片上传

 

 富文本编辑框中上传单个文件

需要添加的参数

images_upload_handler: function (blobInfo, succFun, failFun) {
var xhr, formData;
var file = blobInfo.blob();//转化为易于理解的file对象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/user/demo');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failFun('HTTP Error: ' + xhr.status);
console.log('shibai');
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failFun('Invalid JSON: ' + xhr.responseText);
return;
}
succFun(json.location);
console.log('mcw');
};
formData = new FormData();
formData.append('file', file, file.name );//此处与源文档不一样
xhr.send(formData);
}

需要添加的视图函数

@user_bp1.route('/demo',methods=['GET', 'POST'])
def demo():
    print('###################################')
    dir=r'D:\mcwPy\myblog\static\upload\test'
    f=request.files.get('file')
    fn=f.filename
    fp=os.path.join(dir,fn)
    f.save(fp)
    print(request.files.get('file'))
    return jsonify({ 'location' : "/static/upload/test/%s"%fn })

需要启用图片插件,工具栏展示图片按钮。然后添加图片上传处理参数,后面是个函数

flask博客项目之tinymce图片上传

 

 把我添加的打印去掉,我们需要设置请求的接口是什么,当用户点击保存时会请求这个接口,视图函数将图片保存到本地,然后返回图片的静态文件相对地址。这样编辑器会根据返回的地址生成img标签,将图片地址渲染在页面img标签中

视图函数返回的是个字典,必须包含下面的location。里面放图片保存的相对路径

 return jsonify({ 'location' : "/static/upload/test/%s"%fn })

flask博客项目之tinymce图片上传

 

 页面测试一下

再次点击图片

flask博客项目之tinymce图片上传

 

 会多一个上传按钮,点击上传按钮,上传图片

flask博客项目之tinymce图片上传

 

 当我选泽一个图片点击选中后,这里就变成普通选项了,访问地址也有了,这说明已经请求过了,并返回图片地址渲染在这里了

flask博客项目之tinymce图片上传

 

 我们去服务器端看到,的确已经保存了

flask博客项目之tinymce图片上传

 

 我们再点击保存就相当于上一节内容保存文件地址的方式了

flask博客项目之tinymce图片上传

 

 图片有了,发表

flask博客项目之tinymce图片上传

 

 可以看到图片正常显示在首页中或者详情页面中

flask博客项目之tinymce图片上传

 

 保存的是地址

flask博客项目之tinymce图片上传

 

 如何实现粘贴图片到编辑框,然后上传到图片到服务器呢

思考:我们想要实现粘贴图片到编辑框,然后上传图片到服务器保存起来,并返回图片相对地址。这样我们在编辑框中生成img并将它的图片地址改为我们返回的图片地址,这应该需要绑定粘贴事件吧。粘贴的是图片就上传,然后编辑框里面渲染成网站的图片相对地址加载出来。我们后端就做个判断,对文件类型是不是图片做判断。不是的话就不能保存,是才保存并返回地址。可以根据上面的去写一下

 

我们看下图:http://tinymce.ax-z.cn/plugins/paste.php

将它复制到我们的初始化方法那里

flask博客项目之tinymce图片上传

tinymce.init({
    selector: '#tinydemo',
    plugins: "paste",
    toolbar: "paste",
    paste_preprocess: function(plugin, args) {
        console.log(args.content);
        args.content = 'helloworld';
    }
});

看下图

初始化编辑器,我们添加粘贴插件,当前端每次粘贴,都会触发paste_preprocess函数。我们可以在函数里定义发送一个post请求,后端路由里面打印请求参数,是可以接收到请求参数的,说明每当粘贴内容到编辑框中,都会触发这个请求,我们可以带着我们想要的数据到视图函数中。我们这里还打印了一些插件和args.content两个内容,后面看一i下这两个是什么

flask博客项目之tinymce图片上传

 

 我们粘贴了三次,可以看到每次粘贴,粘贴的内容有的可能不需要生成标签,它没给我们加标签,有的它直接给我们加了标签。而args.content内容就是我们粘贴到编辑框后,它给我们处理过的粘贴的内容/那个插件未定义不用管 。

flask博客项目之tinymce图片上传

 

 当我随便截个图然后粘贴上去的时候,args.content就成了图片标签。地址就算经过base64编码后的图片字符串。那么我们是否能做个判断,每次粘贴中args.content包含图片标签时,就将图片编码字符串发送到后端保存起来呢

flask博客项目之tinymce图片上传

 

 如果我们在js里面直接将args.content赋值,写死了它,那么我在前端编辑框里面无论粘贴什么,结果都是我们给args.content赋的值。

我们看一下下图。1、当我们粘贴”都是我们给“字符串时,编辑器这边args.content接收到粘贴完处理后的内容,2、js程序将处理后的程序打印在控制台,3、我们将处理后的粘贴内容发送post请求到后端服务器。4、后端服务器接收到前端编辑器中处理后粘贴的内容,做打印处理。5、前端js重新给args.content赋值。6、前端编辑器展示的就是args.content最后被赋予的值

总结:我们可以粘贴截图,图片。然后将处理后的图片标签元素发送到后端,后端将用正则将base64编码字符串解码,然后生成图片保存下来,然后返回图片的相对路径。前端发送请求成功,我们就返回的图片的相对路径重新赋值给args.content。这样编辑框中就是img标签,里面src是图片的相对路径,这样就可以显示出图片了。我们点击发表文章时,保存到数据库中的不再是图片编码后的字符串,而是有图片访问地址的图片标签。省了数据库存储空间,将图片分出来存储,当访问博客详情页面时,根据图片路径时可以正常加载出图片的

flask博客项目之tinymce图片上传