| 红尘梦| 红尘醉
EMLOG PRO实现图片粘贴上传本地化功能 - 站长资源网
  • 首页
  • 网站源码
    • 实用源码
    • 小说源码
    • 游戏源码
    • 导航源码
    • 影视源码
    • 企业门户
    • APP源码
    • 小程序源码
  • 程序模板
    • EMLOG模板
    • 织梦CMS模板
    • 杰奇CMS模板
    • 苹果CMS模板
    • WordPress模板
  • 编程学习
    • JS教程
    • CSS教程
    • HTML教程
    • JAVA学习
    • SQL学习
  • 福利分享
    • 软件分享
  • 技术教程
    • SEO教程
  • 随心笔记
  • 插件工具
    • JAVA工具
    • EMLOG插件
    • 采集规则
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 公告动态
    • 关于博主


登录后,享受更多优质服务哦
大哥! 个人中心退出登录
导航菜单
  • 首页
  • 网站源码
    • 实用源码
    • 小说源码
    • 游戏源码
    • 导航源码
    • 影视源码
    • 企业门户
    • APP源码
    • 小程序源码
  • 程序模板
    • EMLOG模板
    • 织梦CMS模板
    • 杰奇CMS模板
    • 苹果CMS模板
    • WordPress模板
  • 编程学习
    • JS教程
    • CSS教程
    • HTML教程
    • JAVA学习
    • SQL学习
  • 福利分享
    • 软件分享
  • 技术教程
    • SEO教程
  • 随心笔记
  • 插件工具
    • JAVA工具
    • EMLOG插件
    • 采集规则
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 公告动态
    • 关于博主
EMLOGEMLOG教程EMLOGPRO

EMLOG PRO实现图片粘贴上传本地化功能

2021/6/26 站长资源网  技术教程 1110 0

前言


     emlog pro默认使用了Editor.md编辑器,由于官方并没有在该编辑器插件调用处留下钩子供开发者进行插件拓展,所以需要进行修改文件实现。


效果图

 


新增插件

      新增JS文件,建议路径:


/admin/editor.md/plugins/image-handle-paste/image-handle-paste.js


      文件内容


/*!
 * editormd图片粘贴上传插件
 *
 * @file   image-handle-paste.js
 * @author codehui
 * @date   2018-11-07
 * @link   https://www.codehui.net
 */

(function() {

    var factory = function (exports) {
        var $            = jQuery;           // if using module loader(Require.js/Sea.js).
        var pluginName   = "image-handle-paste";  // 定义插件名称

        //图片粘贴上传方法
        exports.fn.imagePaste = function() {
            var _this       = this;
            var cm          = _this.cm;
            var settings    = _this.settings;
            var editor      = _this.editor;
            var classPrefix = _this.classPrefix;
            var id       = _this.id;

            if(!settings.imageUpload || !settings.imageUploadURL){
                console.log('你还未开启图片上传或者没有配置上传地址');
                return false;
            }

            //监听粘贴板事件
            $('#' + id).on('paste', function (e) {

                var items = (e.clipboardData || e.originalEvent.clipboardData).items;

                //判断图片类型
                if (items && items[0].type.indexOf('image') > -1) {

                    var file = items[0].getAsFile();

                    /*生成blob
                    var blobImg = URL.createObjectURL(file);
                    */

                    /*base64
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        var base64Img = e.target.result //图片的base64
                    }
                    */

                    // 创建FormData对象进行ajax上传
                    var forms = new FormData(document.forms[0]); //Filename
                    forms.append(classPrefix + "image-file", file, "file_"+Date.parse(new Date())+".png"); // 文件

                    _this.executePlugin("imageDialog", "image-dialog/image-dialog");

                    _ajax(settings.imageUploadURL, forms, function(ret){
                        if(ret.success == 1){
                            $("." + classPrefix + "image-dialog").find("input[data-url]").val(ret.url);
                            //cm.replaceSelection("![](" + ret.url  + ")");
                        }
                        console.log(ret.message);
                    })
                }
            })
        };
        // ajax上传图片 可自行处理
        var _ajax = function(url, data, callback) {
            $.ajax({
                "type": 'post',
                "cache": false,
                "url": url,
                "data": data,
                "dateType": "json",
                "processData": false,
                "contentType": false,
                "mimeType": "multipart/form-data",
                success: function(ret){
                    callback(JSON.parse(ret));
                },
                error: function (err){
                    console.log('请求失败')
                }
            })
        }
    };

    // CommonJS/Node.js
    if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
    { 
        module.exports = factory;
    }
    else if (typeof define === "function")  // AMD/CMD/Sea.js
    {
        if (define.amd) { // for Require.js

            define(["editormd"], function(editormd) {
                factory(editormd);
            });

        } else { // for Sea.js
            define(function(require) {
                var editormd = require("./../../editormd");
                factory(editormd);
            });
        }
    } 
    else
    {
        factory(window.editormd);
    }

})();

插件调用


      修改文件/admin/views/article_write.phppro v1.0.0(RC622)是195行,在onload : function() {内添加


//粘贴上传
editormd.loadPlugin("/admin/editor.md/plugins/image-handle-paste/image-handle-paste", function(){
Editor.imagePaste();
});


其中/admin/editor.md/plugins/image-handle-paste/image-handle-paste是插件文件路径去掉后缀



 点赞:1  打赏  分享  海报

  • 打赏支付宝扫一扫
  • 打赏微信扫一扫
  • 打赏企鹅扫一扫
作者头像 作者名称 作者性别
站长资源网
联系作者 作者主页

热门推荐

1 熊掌号主资料在网站页面内展示 HTML+CSS源代码教程分享
2 网站的域名后缀,会不会影响网站的排名?
3 K站是什么意思?怎么查询自己的网站有没有被K?
4 第一次登陆JENKINS页面空白该如何解决?
5 EMLOG判断文章是否百度收录 代码分享
6 EMLOG模板开发者手册 基础文件和PHP调用标签

评论列表

取消回复

随机文章

    • 年年卡抽1~5元中行微信立减金
      • 邮政会员日准点抢0元实物包邮
        • 教你如何下载拼多多开店证明
          • 王者语音 包含所有英雄语音包下载到本机 所有英雄攻略 故事 人物关系之类的小工具
            • 秒福V1.0贺卡生成工具
  • 分类

    • 网站源码
    • 程序模板
    • 插件工具
    • 技术教程
    • 福利分享
    • 编程学习
    • 随心笔记
    • 网络资讯
    • 商城专区
    • 广告商广告
  • 标签

    李云龙音效 (1) 杰奇CMS (3) JavaScript (2) 伪静态教程 (1) 织梦CMS企业官网 (58) 鼠标悬停 (1) 域名被墙 (1) 首涂苹果CMS模版 (1) 宝塔设置 (1) 外链跳转源码 (1) 代码分享 (1) 百度网盘 (1) 卡片类模版 (1) typecho主题 (1) CSS教程 (6) 小说源码 (3) 织梦CMS安装教程 (2) HTML教程 (8) 翻墙 (1) 后台源码 (1) 门户模板 (1) 仿Win8 (1) URL缩短源码 (1) JDK (1) 织梦后台模板 (1) 资源站模版 (1) 黑帽 (1) 防红源码 (1) 代刷网源码 (1) 秒拍主题模板 (1)
  • Emlog简约资源分享主题

    • 采用了简约单调的风格
    • 比较适合资源分享网
    • 一反常态的模板风格类型
    • 全站自适应资源网主题
    • 原创制作的第一款EMLOG模板
    0元

    需要就请骚扰我

    立即下载
  • 网站统计 I 当前在线:1人

    • 本站管理:1位
    • 用户总数:807位
    • 置顶文章:6篇
    • 日志总数:491篇
    • 微语总数:0条
    • 评论总数:6244条
    • 标签总数:655条
    • 页面总数:4页
    • 分类总数:33个
    • 链接总数:12条
    • 运行天数:1517天
    • 最后更新:3月10日
  • 用户登陆

    
    
    找回密码

    找回密码

    密码已找回?返回登陆

    用户注册

    
    
    စ
    
    已有账号?返回登陆
    Copyright © 2023站长资源网 程序:Emlog5.31 主题:Meta 3.54
    • 首页
    • 加群
    • 搜索
    • 模板
    • 用户

    大家都在搜

    • 资源站模板
    • V8模板
    • 菜刀web版
    • JS算式算法
    • 帝国CMS
    • 恋爱教学
    • 知更鸟模板
    • 新闻类模版
    • 可封装APP
    • 导航模板
    • 资讯模版
    • 装修类织梦模版
    • PC端模板
    • 华为OS系统
    • 个人博客
    • 机械产品类织梦模版
    • 
    • 