Ueditor 百度強(qiáng)大富文本Springboot 項(xiàng)目集成使用

• 首先如果大家的富文本中不考慮圖片或者附件的情況下，只考慮純文本且排版的情況下我們可以直接讓前端的vue來繼承UEditor就可以啦。但是要讓前端將那幾個(gè)上傳圖片和附件的哪些功能給閹割掉！

• 然后就是說如果考慮到了上傳圖片或者視頻和附件那么咱們還是用的前后分離的項(xiàng)目，那么我們就需要后臺(tái)去做一些調(diào)整來職稱前端上傳了功能啦。(市面上有很多富文本編輯器,而且現(xiàn)在的UEditor的前端UI是很丑的,因?yàn)楝F(xiàn)在都2023年啦。但是耐不住人家功能豐富而且免費(fèi))，那么我剛開始了解的這個(gè)也是無從下手，在眾多博客和文檔中找到了一條出路然后隨便做下筆記，讓大家不在急躁乏味奧利給！

• 我在網(wǎng)上看了一大推的資料發(fā)現(xiàn)有很多不一樣的案例實(shí)現(xiàn)，但是說的不是復(fù)雜就是特別的簡(jiǎn)單且抽象無從下手，廢話不多說怎怎么直接開始

  首先我們?nèi)ス倬W(wǎng)，咱們將zip包下載下來之后解壓,注意要下載JSP使用說明的那個(gè)鏈接的zip包，因?yàn)樗莋ithub可能打不開鏈接地址，那么就可以去maven 去下載，但是maven下載的只有咱們后臺(tái)用到的，前端的就要還是去官網(wǎng)下載，然后maven也寫在這里啦

<!-- https://mvnrepository.com/artifact/com.gitee.qdbp.thirdparty/ueditor -->
<dependency>
    <groupId>com.gitee.qdbp.thirdparty</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.4.3.6</version>
</dependency>

然后在jsp中里面會(huì)存在一個(gè) lib文件夾，然后是里面是有一個(gè)是config.json 這個(gè)是比較重要的一個(gè)配置文件一會(huì)我們回去修改其中的內(nèi)容信息，納悶我們現(xiàn)在將需要的jar包考出來是，就在lib 下面 

將文件引入到項(xiàng)目之中的resouces/lib 下 然后添加xml文件的依賴

<dependency>
    <groupId>com.gitee.qdbp.thirdparty</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.4.3.6</version>
    <classifier>lib</classifier>
    <scope>system</scope>
    <systemPath>${project.basedir}/src/main/resources/lib/ueditor-1.4.3.6.jar</systemPath>
</dependency>

• 好的現(xiàn)在已經(jīng)完成了很大一部分啦，后面就是需要寫代碼啦。啦啦啦
  首先大家要是試過Ueditor的官網(wǎng)demo之后會(huì)發(fā)現(xiàn)會(huì)調(diào)用一個(gè)config 的接口，但是現(xiàn)在是沒有這個(gè)接口的，而且這個(gè)接口是一個(gè) 根據(jù)不同的請(qǐng)求參數(shù)來表示不同的請(qǐng)求 比如: config?action=config 初始化，config?action=uploadimage 上傳圖片，config?action=uploadfile 上傳文件 這個(gè)則初始化后臺(tái)的一個(gè)接口就相當(dāng)于進(jìn)屋要先拿鑰匙開門，然后才能操作 上傳功能要不然前段的上傳圖片連彈框都彈不出來。那么這個(gè)鑰匙就是要從我們后面獲取，每次進(jìn)入都要調(diào)用config?action=config 初始化。

Controller
控制層中只需要注意action 的參數(shù)名稱 里面有三個(gè) config,uploadimage,uploadfile 其實(shí)上傳文件和圖片只是存儲(chǔ)路徑不一樣，這個(gè)參數(shù)并不是咱們定義的而是在上面所說的config.json,我將其中的無用配置刪掉啦就留下了 上傳圖片和文件的
這里原文件中有注釋大家可以看一下，所以咱們得那個(gè)接口參數(shù)就是這些，要是咱們接口名稱或者傳參的參數(shù)名稱不叫這個(gè)，咱們就需要讓兩者保持一致。

/**
 * Ueditor富文本控制層
 * @author ZMH
 * @date 24/7/2023 2:33 下午
 */
@Slf4j
@RestController
@RequestMapping("/ueditor")
public class UEditorController {

    @Autowired
    private UEditorUpload uEditorUpload;

    @PassToKen
    @RequestMapping("/config")
    public String exec(HttpServletRequest request,
                       HttpServletResponse response,
                       @RequestParam(value = "action") String action,
                       @RequestParam(value = "upfile", required = false) MultipartFile upfile) throws Exception {
        if (action.equals("config")) {
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html");
            String rootPath = request.getSession().getServletContext().getRealPath("/");
            return new ActionEnter(request, rootPath).exec();
        } else if (action.equals("uploadimage")) {
            UEditorFileVo uEditorFile = uEditorUpload.uploadImage(upfile);
            JSONObject jsonObject = JSONObject.parseObject(JSONObject.toJSONString(uEditorFile));
            return jsonObject.toJSONString();
        } else if (action.equals("uploadfile")) {
            UEditorFileVo uEditorFile = uEditorUpload.uploadFile(upfile);
            JSONObject jsonObject = JSONObject.parseObject(JSONObject.toJSONString(uEditorFile));
            return jsonObject.toJSONString();
        }
        return "無效Action";
    }
}

service
這里我就寫了兩個(gè)上傳其實(shí)其他的和這個(gè)一樣只不過多一樣，就是上傳到服務(wù)器上然后返回相應(yīng)的東西足以讓前端展示就可以啦。

/**
 * Ueditor上傳
 * @author ZMH
 */
@Service
@Slf4j
public class UEditorUpload {

    @Value("${path.ueditor}")
    private String ueditorFilePath;//ueditor文件存儲(chǔ)路徑

    /**
     * 上傳image
     * @author ZMH
     * @param file
     * @return UEditorFile
     */
    public UEditorFileVo uploadImage(MultipartFile file) throws IOException, BaseException {
        log.info("UEditor開始上傳文件");
        if (ObjectUtils.isEmpty(file)){
            log.warn("upfile 文件不能為空!");
            throw new BaseException("upfile 文件不能為空!");
        }
        String fileName = file.getOriginalFilename();  //獲取文件名
        //Ueditor的config.json規(guī)定的返回路徑格式 上傳成功之后會(huì)返回returnPath
        String returnPath = "/upload/image/"+new Date().getTime()+"/"+fileName;
        File saveFile = new File(ueditorFilePath+returnPath);
        if (!saveFile.exists()){
            saveFile.mkdirs();
        }
        file.transferTo(saveFile);
        log.info("UEditor上傳文件成功，保存路徑："+saveFile.getAbsolutePath());
        UEditorFileVo uEditorFile = new UEditorFileVo();
        uEditorFile.setState("SUCCESS");
        uEditorFile.setUrl(returnPath);  //訪問URL
        uEditorFile.setTitle(fileName);
        uEditorFile.setOriginal(fileName);
        return uEditorFile;
    }

    /**
     * 上傳文件
     * @author ZMH
     * @param file
     * @return UEditorFile
     */
    public UEditorFileVo uploadFile(MultipartFile file) throws IOException, BaseException {
        log.info("UEditor開始上傳文件");
        if (ObjectUtils.isEmpty(file)){
            log.warn("upfile 文件不能為空!");
            throw  new BaseException("upfile 文件不能為空!");
        }
        String fileName = file.getOriginalFilename();  //獲取文件名
        //Ueditor的config.json規(guī)定的返回路徑格式
        String returnPath = "/upload/file/"+new Date().getTime()+"/"+fileName;
        File saveFile = new File(ueditorFilePath+returnPath);
        if (!saveFile.exists()){
            saveFile.mkdirs();
        }
        file.transferTo(saveFile);
        log.info("UEditor上傳文件成功，保存路徑："+saveFile.getAbsolutePath());
        UEditorFileVo uEditorFile = new UEditorFileVo();
        uEditorFile.setState("SUCCESS");
        uEditorFile.setUrl(returnPath);  //訪問URL
        uEditorFile.setTitle(fileName);
        uEditorFile.setOriginal(fileName);
        return uEditorFile;
    }

}

實(shí)體類 uEditorFile

/**
 * UEditorFileVo
 * @author ZMH
 */
@Data
@NoArgsConstructor
@Accessors(chain = true)
public class UEditorFileVo {

    private static final long serialVersionUID=1L;

    private String state;

    private String url;

    private String title;

    private String original;

    @Override
    public String toString() {
        return "{" +
                "state='" + state + '\'' +
                ", url='" + url + '\'' +
                ", title='" + title + '\'' +
                ", original='" + original + '\'' +
                '}';
    }
}

到這里已經(jīng)將代碼層面改好啦，然后呢就是最惡心的環(huán)節(jié)啦，那就是他們的源碼里參了一點(diǎn)點(diǎn)西東，那就是BUG，那就是在這個(gè)jar包中的 getConfigPath() 方法，這里的獲取config路徑是不對(duì)的，我們需要改一下這個(gè)代碼，可以使用修改源碼或者重寫來修改這里的源碼,重寫就是依靠java 的類加載器如果本地有就去加載本地的類，如果本地沒有就去加載其他的，這里我是修改源碼實(shí)現(xiàn)的。這里就不用大家改了怕累著大少爺，那既然是為大少爺做事，就要優(yōu)雅。
這里是我改完的源碼百度網(wǎng)盤鏈接: https://pan.baidu.com/s/1tU0uD1IwrMH2Xidcf5h0Dw?pwd=38vc 提取碼: 38vc 如果大家好奇我改的什么idea會(huì)有對(duì)比功能，可以查看一下。其實(shí)就是換了獲取config.json的路徑變?yōu)榱藙?dòng)態(tài)，下載了之后換掉lib下的包。文章來源地址http://www.zghlxwxcb.cn/news/detail-612399.html

//在啟動(dòng)類中加入
//對(duì)應(yīng)的配置文件也要有path.ueditorConfigPath 參數(shù)信息
@Value("${path.ueditorConfigPath}")
private String ueditorConfigPath;

//main中加入
System.setProperty("ueditor_config_path",ueditorConfigPath);

• 到這里就可以上傳啦，但是回顯沒有成功，回顯其實(shí)就是上傳成功之后的 url 和咱們初始化的 config 里面的 前綴也就是
  fileUrlPrefix的值和imageUrlPrefix的值,拼起來就可以啦。這里我采用的nginx，到這里也就結(jié)束啦。
  然后說一下不推薦的方式，不推薦純后臺(tái)集成，不推薦將config.json和保存的路徑放在resouces下，這樣會(huì)導(dǎo)致在本地可以訪問到config.json，打完包之后是訪問不到的，路徑是jar包之內(nèi)的路徑，如果大家初始化有問題，那就記得去打印下你們的config.json
  路徑，然后去順著找一下看看存不存，還有就是一個(gè)那個(gè)上傳到 resouces下的附件雖然說不用去開nginx 直接可以通過
  項(xiàng)目的地址加文件地址可以預(yù)覽但是呢，就會(huì)導(dǎo)致后續(xù)發(fā)的jar包將之前的內(nèi)容覆蓋掉，導(dǎo)致內(nèi)容丟失。還是建議大家分開，然后就是這個(gè)config.json
  到時(shí)候前端是直接將這個(gè)模塊扔到VUE項(xiàng)目中的，我可以引用前端的config.json。改為前端的config.json地址既可，那樣保持一套還好維護(hù)
  

到了這里，關(guān)于Ueditor 百度強(qiáng)大富文本Springboot 項(xiàng)目集成使用(包含上傳文件和上傳圖片的功能使用)簡(jiǎn)單易懂，舉一反三的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！