UEeditor 使用 和图片上传

2023-11-03

首先,页面引入UEditor,下载地址 http://ueditor.baidu.com/website/

页面引入很简单:

这里加两个div的原因,是因为在使用中碰到了一个问题,UEditor把我外层的div样式过滤掉了,UEditor会把引入的这个div的外层div删除掉,所有多加了一个空的div。

<div class="css"> UEeditor 会把这个样式的div删掉,所以多加一个空的div
    <div>
        <div id="questionContentUE" style="width: 495px;height: 450px">
        </div>
    </div>
</div>

初始化UEditor:

 

toolbars 根据自己需要自己初始化,没有要求使用默认的全工具栏。

获得UEditor内容:

 var UEdata= UE.getEditor('questionContentUE').getContent();

填充UEditor内容(在初始化UEeditor时填充):

ue.ready(function () {
    ue.setContent($('#form-id [name=questionContent]').val());
});

 然后是图片上传

修改ueditor.config.js

controller:

这里要用到 ueditor.config.json,引入json文件

代码:
@RequestMapping(value = "/ueditor/ueditorSupport.do")
@ResponseBody
public Object ueditorSupport(HttpServletRequest request, HttpServletResponse response) throws Exception {
    String action = request.getParameter("action");
    if (StringUtils.equals(action, "config")) {
        return JsonUtils.getInstance().readValue(ueditorConfig.getInputStream(), Map.class);
    }
    if (StringUtils.equals(action, "uploadimage")) {
        Map<String, Object> result = new HashMap<>();
        try {
            MultipartRequest multipartRequest = (MultipartRequest) request;
            MultipartFile file = multipartRequest.getFile("upfile");
            String originalFilename = file.getOriginalFilename();
            String fileType = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
            byte[] bytes = IOUtils.toByteArray(file.getInputStream());
            String vivofsImagePath = uploadService.uploadImage("VFS_PATH", bytes, originalFilename);
            result.put("state", "SUCCESS");
            result.put("name", originalFilename);
            result.put("original", originalFilename);
            result.put("size", bytes.length);
            result.put("type", fileType);
            result.put("url", VivoConfigManager.getString("vivofs.cdn.url.prefix") + vivofsImagePath);
        } catch (Exception e) {
            LOGGER.error("upload file failed", e);
            result.put("state", "FAILED");
        }
        return result;
    }
    return "";
}

ps:ue中的表情,标号图片是要重新下载的,不然使用标号的时候会报图片错误

放在ue文件里就可以了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

UEeditor 使用 和图片上传 的相关文章

  • 给初级开发人员的建议

    初学者 生产率 代码新手 学习 在我超过 15 年的开发生涯中 我学到了一些可以显着提高我的效率的东西 在这篇文章中 我将与您分享这些经验教训 结构 基础建议 以下内容的重要背景和动机 技术咨询 主菜 推荐读物 指向非常适合入门的高质量书籍
  • 程序员必知的7种软件架构模式

    架构模式是对给定上下文的软件架构中常见问题的一种通用的可复用的解决方案 一种模式就是特定上下文的问题的一种解决方案 然而 很多开发者至今还对各种软件架构模式之间的差别搞不清 甚至对其所知甚少 大体上 主要有下面这7种架构模式 分层架构 多层
  • excel 导出:

    导出 1 模板导出 1 所需jar
  • 2023 年你应该知道的 10 个开源项目

    精心策划的 2023 年 GitHub 上最有趣的开发工具和项目列表 1 NetBeans NetBeans 是一个开源的集成开发环境 因其支持多种编程语言和平台而受到开发人员的欢迎 动图 2 OpenCV OpenCV 是一个用于图像和视
  • java-layui下载单个或多个文件

    首先设置使用的浏览器 允许同时下载多个文件 这个可以在下载的时候有的浏览器会弹出提示框是否允许下载多文件 有的不弹或者默认禁止的 需要手动设置 这个根据使用的浏览器 自行百度设置即可 代码未用到实际项目中 写的比较杂乱 测试可用后根据自己的
  • 第二课if语句的练习

    知识点 if判断语句 题目1 训练 李雷想买一个价值7988元的新手机 她的旧手机在二手市场能卖1500元 而手机专卖店推出以旧换新的优惠 把她的旧手机交给店家 新手机就能够打8折优惠 为了更省钱 李雷要不要以旧换新 请在控制台输出 训练提
  • Cookie 和 Session 归纳

    首先介绍下基本概念 cookie是服务器通知客户端让其保存健值对的一种形式 客户端有了cookie之后 每次请求就会发送给服务器 每个cookie最大是4kb 服务器创建cookie 1Cookie cookie new Cookie 创建
  • UEeditor 使用 和图片上传

    首先 页面引入UEditor 下载地址 http ueditor baidu com website 页面引入很简单 这里加两个div的原因 是因为在使用中碰到了一个问题 UEditor把我外层的div样式过滤掉了 UEditor会把引入的
  • SpringBoot+Kafka+ELK 完成海量日志收集

    整体流程大概如下 服务器准备 在这先列出各服务器节点 方便同学们在下文中对照节点查看相应内容 SpringBoot项目准备 引入log4j2替换SpringBoot默认log demo项目结构如下 pom
  • SpringBoot集成Validation参数校验

    1 依赖 SpringBoot在web启动器中已经包含validator包
  • 网络编程的无冕之王-Netty入门和核心组件介绍

    最近我在研究Netty 之前只是经常听说 并没有实际做过研究 为什么突然要好好研究一下它 主要是因为前段时间 我在看RocketMQ底层原理的时候发现它的底层的网络通信都是基于Netty 然后网上一查 果然 大家太多的耳熟能详的工具组件 都
  • POI 操作word

    关于POI 操作word的基础知识在这个博客 http elim iteye com blog 2049110 中有非常清晰的解释 在这里我就不多解释了 本文研究的内容就是 XWPFParagraph 代表一个段落 XWPFRun 代表具有
  • Kubernetes 101,第一部分,基础知识

    已经有一段时间了 我想花点时间坐下来写写关于Kubernetes 的文章 时机已到 简而言之 Kubernetes是一个用于自动化和管理容器化应用程序的开源系统 Kubernetes 就是关于容器的 如果你对什么是容器不太了解 请先参考我的
  • 让我们彻底了解Maven(二)--- Maven私服的搭建

    首先我们为什么需要搭建Maven私服 一切技术来源于解决需求 因为我们在实际开发中 当我们研发出来一个公共组件 为了能让别的业务开发组用上 则搭建一个远程仓库很有必要 写完公用组件后 直接发布到远程仓库 别人需要用到时 直接从远程仓库拉取即
  • SpringBoot中使用ThreadPoolExecutor和ThreadPoolTaskExecutor线程池的方法和区别

    Java中经常用到多线程来处理业务 在多线程的使用中 非常的不建议使用单纯的Thread或者实现Runnable接口的方式来创建线程 因为这样的线程创建及销毁势必会造成耗费资源 线程上下文切换问题 同时创建过多的线程也可能会引发资源耗尽的风
  • 用jsp实现登录,登录成功则跳转到登录成功页面,失败则跳转到失败页面

    login jsp
  • An error occurred in the current transaction. You can‘t execute queries until the end of the ‘atomic

    问题 如图所示 错误返回结果是An error occurred in the current transaction You can t execute queries until the end of the atomic block
  • postMan使用技巧

    使用postMan调试接口 一些接口要实现登录才能访问 即要还token才能访问 一般登录后 拿到token才复制到其他接口下添加token变量 如些复制感觉是挺麻烦的 这时我们可以设置postman的全局变量 操作如下 添加调试环境和全局
  • 第三方微信登陆的后台实现

    关于微信第三方的开发 官方文档给了很详细的解析说明 有不清楚流程的同学可以先去官网学习 而我这里主要是整理一下自己的后台处理流程 其实微信登录就是通过用户的授权 允许app获取用户的微信信息 再往自己的数据库插入获取的信息 这里用手机app
  • Java实现MD5加密及解密的代码实例

    础 MessageDigest类的使用 其实要在Java中完成MD5加密 MessageDigest类大部分都帮你实现好了 几行代码足矣 对字符串md5加密 param str return import java security Mes

随机推荐