百度UEditor编辑文章，移动端适配问题

最新推荐文章于 2026-04-24 04:19:39 发布

原创最新推荐文章于 2026-04-24 04:19:39 发布 · 1.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#百度UEditor

收录于

百度Ue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于Java的方法，用于处理UEditor上传的图片路径，将其从相对路径转换为绝对路径，以便在移动端正确显示。此外，通过添加viewport元标签，确保了在不同设备上的内容布局一致性。

/**
 * 将文本中的相对地址转换成对应的绝对地址 此方法用于百度UEditor图片的
 * @return
 */
public static String processImgSrc(String content,String baseUrl){
    Document document = Jsoup.parse(content);
    document.setBaseUri(baseUrl);
    document.head().append("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no\">");
    Elements elements = document.select("img[src]");
    for(Element el:elements){
        String imgUrl = el.attr("src");
        if (imgUrl.trim().startsWith("/")) {
            el.attr("src", el.baseUri()+imgUrl);
            el.attr("width","100%");
            el.attr("height","auto");
        }
    }
    return document.html();
}

1.以上后端是基于java的，baseUrl为存放图片的域名地址，为了使移动端能够正常显示UEditor上传的图片，在获取内容详情时将图片的域名拼接上。

2.加上此行代码document.head().append("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no\">") ，可以是在pc端编辑的文章格式适配手机移动端。