Vue集成 富文本编辑器Ueditor读取相对路径资源显示不出的问题

在做Vue整合ueditor中,要显示图片时,数据库中的数据是另一个项目中使用CKeditor存储的相对路径,然而ueditor读取显示的是相对路径。所以在调试中,发现请求资源的路径一直是前端部署地址,localhost:8001,8001是我前端部署地址。所以一直请求不到后端资源。

解决办法:在取到的数据库数据中,将项目的IP地址、端口号和项目资源路径加入src中

/**
 * 用来获取项目部署的IP地址和端口号
 */
@Component
public class ServerConfig implements ApplicationListener<WebServerInitializedEvent> {
    private int serverPort;

    @Override
    public void onApplicationEvent(WebServerInitializedEvent event) {
        this.serverPort = event.getWebServer().getPort();
    }

    public String getUrl() {
        InetAddress address = null;

        try {
            address = InetAddress.getLocalHost();
        } catch (UnknownHostException e) {
            e.printStackTrace();
        }
        assert address != null;
        return "http://"+address.getHostAddress() +":"+this.serverPort;
    }



}

在获取显示数据时,进行数据替换

        String address = serverConfig.getUrl();
        replace = "src=\""+address+"/admin-fast/static/";
        content=content.replaceAll("src=\"",replace);

这样处理之后,ueditor中就能正确显示资源了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值