Web项目接入UEditor编辑器及会遇到的问题

た入场券 2022-01-31 15:29 263阅读 0赞

> 背景：项目要用到富文本编辑器。  
> ueditor下载地址：https://ueditor.baidu.com/website/download.html  
> 官方配置文档：https://fex.baidu.com/ueditor/\#server-jsp

2019-05-19已解决不能配置虚拟路径的问题

## UEditor接入Web项目及若干问题 ##

上传后，前端页面读取视频效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MjA2MjQ0_size_16_color_FFFFFF_t_70]

富文本效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MjA2MjQ0_size_16_color_FFFFFF_t_70 1]  
目前进展：无法配置tomcat虚拟目录，无法导入重编译的jar，只能将文件放在tomcat下项目目录。

--------------------

Web集成UEditor步骤：  
1.笔者环境： jdk 7，tomcat7，jsp，windows  
2.建立web项目  
3.将官网下载的rar解压

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MjA2MjQ0_size_16_color_FFFFFF_t_70 2]  
4.根据需要可选择将文件夹重命名  
![在这里插入图片描述][20190516232800437.png]  
5.整体导入项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MjA2MjQ0_size_16_color_FFFFFF_t_70 3]  
如图所示，这里放在了webContent目录，红叉是json文件有注释。  
  
6.将ueditor-》jsp-》lib下的5个jar包，同时复制到web-info-》lib下。

至此，图文上传可以实现。下面讲到上传后回显，及页面读取上传的文件。

--------------------

7.编辑框要实现回显，同时页面能读取，需要：

*  1.config.json配置参数  
    
 *  2. tomcat配置虚拟路径
 *  8.config.json配置
    
    ![在这里插入图片描述][20190516233319767.png]  
    官方下载下来，红框这里是“”，需要手动配置，才能实现回显和读取。  
      
    9.tomcat虚拟路径  
    ![在这里插入图片描述][20190516233443340.png]  
    两个参数：docBase：磁盘物理路径，path：虚拟路径，对应第8步的“/upload”
    
    --------------------
    
    至此，上传、回显、读取实现。缺点，无法实现tomcat目录外虚拟路径，也是目前研究的问题。
    
    下面说些坑：  
    1.官网下载的rar解压后，5个jar包不能做任何改动，包括移动、复制等操作。否则，就会报错：大意为，目标jar包jdk版本与当前项目不匹配。  
    2.解决方案，参考步骤1-5，不要动jar文件夹，只重命名，然后整体拷贝进项目。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MjA2MjQ0_size_16_color_FFFFFF_t_70 4]  
    如果配置不正确，这里的图片上传等多个上传相关的插件无法使用，提示异常。同时控制台会报错。
    
    --------------------
    
    修改了ueditor-1.2.1.jar，重新打成jar，导入项目会报错，导致无法解决部署tomcat外的虚拟目录。目前正在寻求解决方案，正在研究中，欢迎大家提供经验。
    
    --------------------
    
    2019-5-19更新  
    配置项目路径外磁盘路径，网上大多数解决方案是修改ueditor jar包源码，然后在controller文件定义一个路径，传入actionEnter。但我在使用此方案时，碰到了控制台报错，大意为，目标jdk版本不一致。研究了好久，发现其他项目正常，就在此项目上出问题。也许有机器环境，项目其他因素等的影响。遂决定寻找其他解决方案。
    
    找到了新的解决方案，博主的解决思路很清晰，对源码的修改也很方便，只是继承了原有的actionEnter类，添加了新的rootPath，值得学习：  
    1.不能用虚拟路径，是因为传给actionEnter的参数是rootPath。始终传的是“/”根路径。  
    2.继承ActionEnter类，用新的方法，设置路径。  
    原文：https://cloudstars.iteye.com/blog/2428100
    
    2019年8月27日 13:11:39  
    tomcat配置虚拟路径
    
        <Context docBase="D:/upload" path="/myPath/upload" reloadable="true"/>
    
    > 文章仓促，仅作笔记，后续修改，欢迎探讨。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MjA2MjQ0_size_16_color_FFFFFF_t_70]: /images/20220131/68c5587266634b26b4185f49a92a6c3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MjA2MjQ0_size_16_color_FFFFFF_t_70 1]: /images/20220131/2f70b66abaac4ba6924e3cb35a7a2cce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MjA2MjQ0_size_16_color_FFFFFF_t_70 2]: /images/20220131/79acb5ecba404d4886095d7ee745978b.png
[20190516232800437.png]: /images/20220131/bd02d48dc591421893f91818292daffb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MjA2MjQ0_size_16_color_FFFFFF_t_70 3]: /images/20220131/d500314754c0490499503363ef90b7c5.png
[20190516233319767.png]: /images/20220131/f579112a97e444e7a83a76924273268d.png
[20190516233443340.png]: /images/20220131/f23f254a200d4d73848e8718ae98c6f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MjA2MjQ0_size_16_color_FFFFFF_t_70 4]: /images/20220131/f3003857e7e1456d8136383eaefaf89b.png