怎么把剪贴板中的图片粘贴到我们的在线编辑器中并一键上传?-前端教程-前军教程网

技术类型: HTML+JS+图片文件处理
应用平台: Windows/Linux/MacOS全平台
使用范围: 前端+后端
用到工具: 编辑器
需要基础: Web相关知识/HTML/JS/Nodejs

这期我们来讲一下浏览器中爬格子时常见的编辑器-----中的一个增强功能

在编辑器中直接粘贴图片!

也就是你写文章时可以边写边把截图直接整到文章中, 就像在Word里写文章一样爽!

二话不说, 动手就开撸[泪奔]

既然是在线编辑器了,那肯定先整个HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 </head>
<body></body>
</html>

在线编辑器的基础做法常见的有2种, 1是利用iframe来做, 2是利用HTML中针对DOM元素的"可编辑"属性来实现, 我们以后者为例子

先准备个DIV做编辑器, 加点简单样式,做成个编辑器的样子

<div id="editor" style="width:500px;height:300px;padding: 10px;background-color: #f9f9f9;box-shadow: inset 0 2px 3px 1px #ddd;"></div>

接下来给DIV加上可编辑的属性

contenteditable="true"

这个时候, 其实DIV已经有接受图片元素的能力

截个图试一下:

是的, 你没看错, 这样已经可以了! 老实说, 以前旧版的浏览器和旧的HTML标准是做不到这点的, 好了,下课.....[酷拽]

别别别, 其实还要讲一下完整过程,拖一下堂

用F12的调试功能,我们可以看到贴进来的图片

其实是Base64形式的内容

接下来聪明如你, 肯定知道要怎么保存了

为了简单起见, 我们直接整个Form吧

<form method='post', onsubmit="return processData()", action='/nj/demo/postpic' enctype='multipart/form-data'>
</form>

再整个textarea来装编辑器的内容(当然, 你可以直接取DIV内容通过Ajax提交)

以及一个提交按钮

<textarea  name="content" id="content" style="display:none"></textarea>
<input type="submit" />

再来点JS, 它负责在提交表单前先把DIV中的内容放到textarea中, 在提交的时候把内容Post给后端

        function processData(){
            document.getElementById("content").value = document.getElementById("editor").innerHTML;
            return true;
        }

至于服务端, 这里只简单提一下, 我们用Nodejs来接数据,因为重点是前端的实现, 以及后端如何保存, Web服务在Nodejs里怎么实现不在本期范围内罗

保存时可以分2种情况进行处理

- 直接把接收到的内容完整的保存到数据库中, 使用的时候直接展示

- 把图片单独提取出来存在图片文件

第1种方法简单, 因为Post上来的就是"<img src="data:image/png;base64,iVBOR....."这种形式, 展示时直接用作HTML渲染是没有任何问题的.

我们来讲第2种

把接到的内容处理一下, 提取出Base64的内容, 并保存成文件

const multer = require('multer');
let upload = multer({ dest: './upload' });
demo.use(upload.any());                     //允许上传什么类型文件,any 代表任何类型
demo.post('/postpic', function (req, res) {
    let imgc = req.body.content;  //接收整个编辑器的内容
    imgc = imgc.substring((imgc.indexOf('<img src="') + 10), imgc.indexOf('" alt="">')); //剥离出图片部分
    let bfile = imgc.replace(/^data:image\/\w+;base64,/, "");   //移除不需要的头部数据
    let dataBuffer = Buffer.from(bfile, 'base64');              
    fs.writeFile("d:/jietu.png", dataBuffer, function (err) { if (err) console.log(err); });  //另存成图片文件
    res.json({code:200, msg:'ok'});
});

这里借助了multer

主要是展示如何把Base64内容的图片保存成真实的文件

执行后去D盘看一下结果

这个截图粘贴到编辑器的功能, 在以前看来没有实现的途径

随着技术发展, 现在已经能以较简单的方式变成现实, 极大的方便使用者的体验

如果你的应用里有编辑器, 赶紧加入这个功能的支持吧

常用的头条文章编辑/QQ邮箱/知乎编辑器等都已经支持, 这么好使的东西你岂容错过?

下面是完整的代码样例(前端)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script>
        function processData(){
            document.getElementById("content").value = document.getElementById("editor").innerHTML;
            return true;
        }
    </script>
</head>
<body>
    <form method='post', onsubmit="return processData()" action='/nj/demo/postpic' enctype='multipart/form-data'>
        <div id="editor" contenteditable="true" style="width:500px;height:300px;padding: 10px;background-color: #f9f9f9;box-shadow: inset 0 2px 3px 1px #ddd;"></div>

        <textarea name="content" id="content" style="display:none"></textarea>
        <input type="submit" />
    </form>
</body>
</html>

简不简单

我就喜欢简单又好使的东西

这期就酱,下期再见[紫薇别走]

复杂的问题简单化
每次只关注一个知识点
对技术有兴趣的小伙伴可以关注我, 致力于分享各种奇奇怪怪的技术知识给大家

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

怎么把剪贴板中的图片粘贴到我们的在线编辑器中并一键上传?