VUE2.0集成UEditor富文本编辑器实现图片搜索及在线管理

吃草莓的鬼

已于 2023-07-12 17:04:24 修改

阅读量721

点赞数

文章标签：前端 vue

于 2023-07-12 17:02:41 首次发布

本文链接：https://blog.csdn.net/Bumblebee_Bee/article/details/131679221

版权

集成参考：VUE2.0集成UEditor富文本编辑器

1. 图片搜索

1.1 修改页面样式

① 打开 image.html 文件

路径：UEditor -> dialogs -> image；
说明：去掉搜索类型下拉框，添加上一页及下一页操作按钮；

html页面部分修改如下：

<!-- 搜索图片 -->
<div id="search" class="panel">
    <div class="searchBar">
        <input id="searchTxt" class="searchTxt text" type="text" />
        <input id="searchPage" class="searchPage hidden" type="number" value="1" min="1" max="20" />
        <select id="searchType" class="searchType hidden">
            <option value="&s=4&z=0"></option>
            <option value="&s=1&z=19"></option>
            <option value="&s=2&z=0"></option>
            <option value="&s=3&z=0"></option>
        </select>
        <input id="searchNext" type="button" class="noDrop" disabled="disabled" />
        <input id="searchPrev" type="button" class="noDrop" disabled="disabled" />
        <input id="searchReset" type="button" />
        <input id="searchBtn" type="button" />
    </div>
    <div id="searchList" class="searchList">
        <ul id="searchListUl"></ul>
    </div>
</div>

② 打开 zh-cn.js 以及 en.js

路径：UEditor -> lang；
说明：在对应位置做如下修改，添加上一页及下一页；

// zh-cn.js
UE.I18N['zh-cn'] = {
    //===============dialog i18N=======================
    'insertimage': {
        'static': {
            'searchBtn': { 'value': "百度一下" },
            'searchReset': { 'value': "清空搜索" },
            'searchPrev': { 'value': "上一页" },
            'searchNext': { 'value': "下一页" },
        }
    }
}

// en.js
UE.I18N['en'] = {
    //===============dialog i18N=======================
    'insertimage': {
        'static': {
            'searchBtn':{'value':"Search"},
            'searchReset':{'value':"Clear"},
            'searchPrev':{'value':"Prev"},
            'searchNext':{'value':"Next"},
        }
    }
}

③ 打开 image.css 文件

路径：UEditor->dialogs->image；
说明：增加上一页及下一页按钮 css 样式；

#search #searchPrev,
#search #searchNext {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 5px;
    padding: 4px 10px;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    font-size: 14px;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: top;
    float: right;
}

#search #searchPrev {
    color: #3b97d7;
    border-color: #ccc;
    background-color: white;
}

#search #searchNext {
    color: #3b97d7;
    border-color: #ccc;
    background-color: white;
}

#search #searchPrev:hover {
    background-color: #eee;
}

#search #searchNext:hover {
    background-color: #eee;
}

.hidden {
    display: none;
}

.noDrop {
    cursor: no-drop
}

.pointer {
    cursor: pointer;
}

1.2 修改处理方法

① 打开 image.js 文件

路径：UEditor->dialogs->image；
说明：1> 添加上一页及下一页按钮单击事件；2> 修改点击搜索按钮及点击清除按钮单击事件[对上一页及下一页按钮样式进行修改]；

// 代码只显示修改部分，找到对应的方法，进行修改
SearchImage.prototype = {
    initEvents: function () {
        /* 点击搜索按钮 */
        domUtils.on($G('searchBtn'), 'click', function () {
            var key = $G('searchTxt').value;
            if (key && key != lang.searchRemind) {
                _this.getImageData();
                // 修改 Start
                $G('searchPrev').setAttribute("disabled", "disabled");
                $G('searchNext').removeAttribute("disabled");
                $G('searchPrev').style.cursor = "no-drop";
                $G('searchNext').style.cursor = "pointer";
                // 修改 End
            }
        });
        /* 点击清除按钮 */
        domUtils.on($G('searchReset'), 'click', function () {
            $G('searchTxt').value = lang.searchRemind;
            $G('searchListUl').innerHTML = '';
            $G('searchType').selectedIndex = 0;
            // 修改 Start
            $G('searchPrev').setAttribute("disabled", "disabled");
            $G('searchNext').setAttribute("disabled", "disabled");
            $G('searchPrev').style.cursor = "no-drop";
            $G('searchNext').style.cursor = "no-drop";
            // 修改 End
        });
        /* 点击上一页按钮 */
        domUtils.on($G('searchPrev'), 'click', function () {
            $G('searchNext').removeAttribute('disabled');
            $G('searchNext').style.cursor = "pointer";
            var page = $G('searchPage').value;
            if (page <= 1) {
                $G('searchPage').value = 1;
                $G('searchPrev').setAttribute("disabled", "disabled");
                $G('searchPrev').style.cursor = "no-drop";
            }
            else {
                $G('searchPage').value = Number(page) - 1;
                $G('searchPrev').removeAttribute('disabled');
                $G('searchPrev').style.cursor = "pointer";
            }
            if (page != $G('searchPage').value) _this.getImageData();
            // console.log("当前页码", $G('searchPage').value, page);
        });
        /* 点击下一页按钮 */
        domUtils.on($G('searchNext'), 'click', function () {
            $G('searchPrev').removeAttribute('disabled');
            $G('searchPrev').style.cursor = "pointer";
            var page = $G('searchPage').value;
            if (page >= 20) {
                $G('searchPage').value = 20;
                $G('searchNext').setAttribute("disabled", "disabled");
                $G('searchNext').style.cursor = "no-drop";
            }
            else {
                $G('searchPage').value = Number(page) + 1;
                $G('searchNext').removeAttribute('disabled');
                $G('searchNext').style.cursor = "pointer";
            }
            if (page != $G('searchPage').value) _this.getImageData();
            // console.log("当前页码", $G('searchPage').value, page);
        });
    },
    getImageData: function () {
        var _this = this,
            key = $G('searchTxt').value,
            type = $G('searchType').value,
            keepOriginName = editor.options.keepOriginName ? "1" : "0",
            currentIndex = (Number($G('searchPage').value) - 1) * 32,

            // url = "http://image.baidu.com/i?ct=201326592&cl=2&lm=-1&st=-1&tn=baiduimagejson&iskey + type + "&ie=utf-8&oe=utf-8&keeporiginname=" + keepOriginName + "&" + +new Date;

            // 若无跨域问题，则url = "http://image.baidu.com/search/acjson?tn=resultjson_com&ipn=rj&ct=201326592&is=&fp=result&cl=2&lm=-1&ie=utf-8&oe=utf-8&adpicid=&st=&z=&ic=&hd=&s=&se=&tab=&width=&height=&face=isAsync=&pn=${currentIndex}&rn=32&gsm=1e&${new Date}"

            // 跨域问题，则使用此url-对应网址/apiBdImage/
            url = `/apiBdImage/search/acjson?tn=resultjson_com&ipn=rj&ct=201326592&is=&fp=result&cl=2&lm=-1&ie=utf-8&oe=utf-8&adpicid=&st=&z=&ic=&hd=&s=&se=&tab=&width=&height=&face=isAsync=&pn=${currentIndex}&rn=32&gsm=1e&${new Date}`;

        $G('searchListUl').innerHTML = lang.searchLoading;
        $.ajax({
            type: "GET",
            url: url,
            success: function (response) {
                var list = [];
                if (response && response.data) {
                    for (var i = 0; i < response.data.length; i++) {
                        if (response.data[i].objURL) {
                            var objUrl = _this.decryptImageUrl(response.data[i].objURL);
                            var fromUrl = _this.decryptImageUrl(response.data[i].fromURL);
                            var isImage = _this.judgeUrlIsImage(objUrl);
                            if (isImage) {
                                isExistsImage = _this.checkImgExists(objUrl);
                                if (isExistsImage) {
                                    list.push({
                                        title: response.data[i].fromPageTitleEnc,
                                        src: objUrl,
                                        url: fromUrl
                                    });
                                }
                                else {
                                    list.push({
                                        title: response.data[i].fromPageTitleEnc,
                                        src: response.data[i].hoverURL,
                                        url: response.data[i].thumbURL
                                    });
                                }
                            }
                            else {
                                list.push({
                                    title: response.data[i].fromPageTitleEnc,
                                    src: response.data[i].hoverURL,
                                    url: response.data[i].thumbURL
                                });
                            }
                        }
                    }
                }
                _this.setList(list);
                //console.log("在线搜索图片回执", response?.data, list);
            },
            error: function (ex) {
                console.error(ex);
                $G('searchListUl').innerHTML = lang.searchRetry;
            }
        });
    },
    // 解密百度搜索图片地址
    decryptImageUrl: function (encryptedUrl) {
        if (encryptedUrl) {
            var f = { w: "a", k: "b", v: "c", 1: "d", j: "e", u: "f", 2: "g", i: "h", t: "i", 3: "j", h: "k", s: "l", 4: "m", g: "n", 5: "o", r: "p", q: "q", 6: "r", f: "s", p: "t", 7: "u", e: "v", o: "w", 8: "1", d: "2", n: "3", 9: "4", c: "5", m: "6", 0: "7", b: "8", l: "9", a: "0", _z2C$q: ":", "_z&e3B": ".", AzdH3F: "/" };
            var h = /(_z2C\$q|_z&e3B|AzdH3F)/g;
            var e = encryptedUrl.replace(h, function (t, e) { return f[e] });
            var s = /([a-w\d])/g;
            e = e.replace(s, function (t, e) { return f[e] });
            return e;
        }
        else return encryptedUrl;
    },
    // 判断地址是否指向图片
    judgeUrlIsImage: function (url) {
        var flag = false;
        if (url) {
            if (url.indexOf('.') > -1) {
                var parts = url.split(".");
                var suffix = parts[parts.length - 1];
                suffix = suffix.toLowerCase();
                var imgSuffixs = ["jpg", "jpeg", "png", "gif"];
                if (imgSuffixs.indexOf(suffix) > -1) flag = true;
            }
        }
        return flag;
    },
    // 检查图片是否存在
    checkImgExists: function (imgurl) {
        var ImgObj = new Image(); //判断图片是否存在
        ImgObj.src = imgurl;
        //存在图片
        if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0))
            return true;
        else
            return false;
    },
}

1.3 修改config.json

/* 抓取远程图片配置 */
// 此配置项为过滤掉抓图操作对应的域名
"catcherLocalDomain": [ "127.0.0.1", "localhost", "img0.baidu.com", "img1.baidu.com", "img2.baidu.com" ],

1.4 跨域设置代理

* 若访问image.com无跨域问题则可忽略

① 打开 vue.config.js 文件；

② 添加代理信息；

// 代码只显示修改部分，找到对应位置进行修改
module.exports = {
    devServer: {
        proxy: {
            '/apiBdImage': {
                target: 'https://image.baidu.com/',
                ws: true,
                changeOrigin: true,
                pathRewrite: { '^/apiBdImage': '' }
            }
        }
    }
}

2. 在线管理

2.1 配置访问路径

① 修改 config.json 文件

/* 列出指定目录下的图片 */
// 目标文件夹放置在wwwroot文件夹下，放置显示的图片
"imageManagerListPath": "CommonUpLoadFiles/UEditorFiles/ListImages", /* 指定要列出图片的目录 */

吃草莓的鬼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
VUE2.0集成UEditor富文本编辑器实现图片搜索及在线管理

VUE2.0集成UEditor富文本编辑器实现图片搜索及在线管理
复制链接

扫一扫