子比主题前台投稿增强:支持复制粘贴图片、拖拽文件上传的实用插件-zibll教程分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

子比主题前台投稿增强:支持复制粘贴图片、拖拽文件上传的实用插件

子比主题前台投稿、前台发帖时,默认插入图片或附件通常需要点击上传按钮,再从本地设备中选择文件。这个方式能用,但不够方便,尤其是写教程、发截图、发布资源内容时,频繁手动选择文件会打断编辑流程。

这个问题的原因是:前台编辑器默认主要处理文字输入和传统上传,并没有主动接管浏览器的剪贴板图片和拖拽文件。用户复制图片时,浏览器拿到的是临时图片数据;用户拖入文件时,页面也只是接收到本地文件对象。如果没有额外逻辑把这些文件上传到服务器,并生成正式文件地址,编辑器就无法自动插入图片或附件。

这个插件就是基于这个原理开发的:在不修改子比主题源码的前提下,为前台编辑器补充“粘贴上传”和“拖拽上传”能力。

技术上,插件通过 JavaScript 监听前台编辑器的粘贴事件和拖拽事件,识别剪贴板中的图片或拖入的文件;再通过 WordPress AJAX 上传机制,把文件保存到媒体库;上传成功后,根据返回的文件地址,自动插入到当前编辑位置。图片会以图片形式插入,普通文件则以附件链接形式插入。

简单来说,它接管了四个环节:

  1. 粘贴:识别剪贴板里的图片;
  2. 拖拽:识别拖入编辑器的图片或文件;
  3. 上传:调用 WordPress 上传接口保存到媒体库;
  4. 插入:上传完成后自动把图片或附件链接插入正文。

安装后,用户在前台发布文章、帖子或论坛内容时,可以直接复制粘贴图片,也可以拖拽文件到编辑器中,发布体验更接近现代在线编辑器。

请登录后发表评论