Ueditor使用期间遇到的问题汇总

最新推荐文章于 2024-03-28 18:31:56 发布

hlp4207

最新推荐文章于 2024-03-28 18:31:56 发布

阅读量938

点赞数

分类专栏：杂项文章标签： ueditor 富文本编辑器 bootstrap

本文链接：https://blog.csdn.net/hlp4207/article/details/82899868

版权

杂项专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.图片上传

1.1 保存

自定义图片上传保存的路径及回显问题

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function (action) {
    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
        return baseUrl+'uploadImg';//此处写自定义的图片上传路径
    } else if (action == 'uploadvideo') {
        return baseUrl + 'uploadVideo';//此处写自定义的视频上传路径
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
};

定义好上传路径后，后台如果是java编写的话在controller中使用

@RequestParam(value = "upfile") MultipartFile file

来接收页面传输的图片，然后自己编写保存图片的方法将图片进行保存

1.2 回显

简单的回显我就不说了，我这里说这种情况：当图片保存到另一台电脑上，无法直接从本地进行读取图片进行回显的时候，这时候怎么处理呢？

当图片保存到另一台电脑上之后，将某种标识信息作为返回值进行返回，比如图片的路径，上传图片后返回给页面的数据的格式为jsonObject格式，比如：

{"state":"SUCCESS","url":"c:/a.png"}

页面根据url的值(http://localhost:8080/c:/a.png)去寻找图片，但是直接将这个返回值返回给页面是肯定无法进行回显的,因为图片都存储到另一台电脑上了，根本读取不到，所以这里我们可以将返回页面的url的写为：/loadImg?param=c:/a.png,这时候页面就会向requestMapping为：/loadImg的controller发请求，并且携带了图片路径参数，后台拿到参数之后，就去另一台电脑上读取图片信息，将图片转为byte[]，用PrintWriter将图片信息发回页面，完成回显。

2.model框与ueditor之间存在的问题

2.1 在弹出的model框中无法点击工具栏中的工具按钮，如下图

无法选取字体字号等信息，这时候找到ueditor.config.js文件，修改：zIndex : 2000 //编辑器层级的基数,默认是900。zIndex的值根据具体情况修改，如果不行就试试再改大些。

2.2 点击全屏无法全屏

找到ueditor.all.js文件，搜索

if (fullscreen) {
                    while (container.tagName != "BODY") {

在括号后添加：

var position = baidu.editor.dom.domUtils.getComputedStyle(container, "position");
                        nodeStack.push(position);
                        var isModal = false;
                        //判断该dom是否为modal
                        var classes = $(container).attr('class');
                        if (classes !== undefined) {
                            classes = classes.split(' ');
                            for (var i = 0; i < classes.length; i++) {
                                if (classes[i] == "modal") {
                                    isModal = true;
                                }
                            }
                        }
                        //如果是modal,则不设置position为static
                        if (!isModal) {
                            container.style.position = "static";
                        }
                        container = container.parentNode;

3.上传图片图片显示尺寸过大

找到ueditor.all.js文件，搜索

var html = ( ie && browser.version < 9  ? '' : '<!DOCTYPE html>')

在下面添加：

//设置图片最大宽度，以免撑出滚动条(具体数据自己定)
'img{max-width:50%;}'+

欢迎加群大家一起学习大数据~群里还有很多资料可供参考~

大数据大佬菜鸡交流群 575419003

hlp4207

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ueditor使用期间遇到的问题汇总

1.图片上传1.1 保存自定义图片上传保存的路径及回显问题UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function (action) { if (action == 'uploadimage' || a...
复制链接

扫一扫

专栏目录