在 solo 中添加百度 UEditor 和 OSS 的支持

  上段时间发现一个很有意思的开源博客系统，于是自己搭建了一下，在上面发布了一篇小文章，并且吐槽了一下它。

记得当时有朋友评论建议我将UEditor的支持发布到GitHub上，只不过我这里因为装了tfs，并且我这个破烂的Eclipse跟github插件有点儿冲突，就没有将其上传。

  不过本着共同学习的精神，我把solo增加UEditor支持的过程以及代码在这里给大家分享一下。

说到UEditor，不少朋友估计都有些头疼，因为他封装的太死，在一些特殊情况下，你很难将他集成进去。比如说这个solo博客系统。其实吧，这些根本难不倒咱们Java工程师，谁叫咱们是玩儿Java的呢？编码不咋地吧，倒是看开源代码的技术炉火纯青！所以我直接下载了UEditor的完整版源代码，我先找出对我有用的，放到solo工程里，如下图。

  毫不避委的说，我很懒，所以我直接把这个com文件夹拷贝到solo工程里了。如下（红叉不用管，js压缩后导致的）：

将Java后端处理代码拷贝到工程以后，先别忙着上去改，咱们先把UEditor整出来再说，整出来以后看看哪里有毛病，然后再有目标的小改一下，将web端代码拷贝到工程，我把它拷贝到了webapp/js目录：

这里有的朋友会看到红叉叉，可以自己拿源码修复一下，也可以直接忽略。

这里其实你可以删除ueditor.all.min.js，

还有ueditor.parse.min.js

修改src\main\webapp\admin-preference.ftl

    搜索“editorType”在此节点添加一个option：“UEditor”

    TinyMCE
    CodeMirror(Markdown)
    KindEditor
    
    UEditor

修改src\main\webapp\admin-index.ftl

    在头部或尾部添加UEditor的引用。具体在哪里添加是自身项目而定，我是在头部添加的，没有特殊需求的话，建议放在尾部。

    
        
        
        ${blogTitle} - ${adminConsoleLabel}
        
        
        
        
        
        
        
		 
		
		
		
        
    
    
    
    

创建\src\main\webapp\js\admin\editorUeditor.js文件

    复制内容如下：

/**
 * Ueditor插件集成
 * @author 郭胜凯
 * @email 719348277@qq.com
 */
admin.editors.UEditor = {
/**
* 编辑器实例
*/
editorObj: null,
​
    /*

     * @description 初始化编辑器

     * @param conf 编辑器初始化参数

     * @param conf.kind 编辑器类型

     * @param conf.id 编辑器渲染元素 id

     * @param conf.fun 编辑器首次加载完成后回调函数

     /

    init: function (conf) {

        var language = Label.localeString.substring(0, 2);

        if (language === "zh") {

            language = "zh-cn";

        }

        try {

        	if(null == this.editorObj){

        		this.editorObj = UE.getEditor('articleContent');

        	}

        } catch (e) {

            $("#tipMsg").text("UEditor load fail");

        }

    },

    /

     * @description 获取编辑器值

     * @param {string} id 编辑器 id

     * @returns {string} 编辑器值

     /

    getContent: function (id) {

    	var content = "";

    	try {

content = this.editorObj.getContent();

} catch (e) {

// TODO: handle exception

content = document.getElementById(id).innerHtml;

}

return content;

   	

   	

    },

    /

     * @description 设置编辑器值

     * @param {string} id 编辑器 id

     * @param {string} content 设置编辑器值

     /

    setContent: function (id, content) {

    	try {

    		this.editorObj.setContent(content);

} catch (e) {

// TODO: handle exception

document.getElementById(id).innerHtml=content;

}

    },

    /

     * @description 移除编辑器

     * @param {string} id 编辑器 id

     */

    remove: function (id) {

    	if(this.editorObj){

    		try{

    			this.editorObj.destroy();

    			this.editorObj = null;

    		}catch (e) {

// TODO: handle exception

}

   		

   		

    	}

    }

};

修改 src\main\webapp\admin-index.ftl

    在尾部添加 editorUeditor.js 的引用

<script src="${staticServePath}/js/lib/jquery/jquery.min.js">

        <script src="${staticServePath}/js/lib/jquery/file-upload-9.10.1/vendor/jquery.ui.widget.js">

        <script src="${staticServePath}/js/lib/jquery/file-upload-9.10.1/jquery.iframe-transport.js">

        <script src="${staticServePath}/js/lib/jquery/file-upload-9.10.1/jquery.fileupload.js">

        <script src="$staticServePath/js/lib/jquery/jquery.bowknot.min.js?${staticResourceVersion}">

        <script src="${servePath}/js/lib/tiny_mce/tiny_mce.js">

        <script src="${staticServePath}/js/lib/KindEditor/kindeditor-min.js">

        <script src="${staticServePath}/js/lib/CodeMirror/codemirror.js">

        <script src="$staticServePath/js/common${miniPostfix}.js">

        <#if "" == miniPostfix>

        <script src="${staticServePath}/js/admin/admin.js">

        <script src="${staticServePath}/js/admin/editor.js">

        <script src="${staticServePath}/js/admin/editorTinyMCE.js">

        <script src="${staticServePath}/js/admin/editorKindEditor.js">

        <script src="${staticServePath}/js/admin/editorCodeMirror.js">

        

        <script src="${staticServePath}/js/admin/editorUeditor.js">

        

        <script src="${staticServePath}/js/admin/tablePaginate.js">

        <script src="${staticServePath}/js/admin/article.js">

        <script src="${staticServePath}/js/admin/comment.js">

        <script src="${staticServePath}/js/admin/articleList.js">

        <script src="${staticServePath}/js/admin/draftList.js">

        <script src="${staticServePath}/js/admin/pageList.js">

        <script src="${staticServePath}/js/admin/others.js">

        <script src="${staticServePath}/js/admin/linkList.js">

        <script src="${staticServePath}/js/admin/preference.js">

        <script src="${staticServePath}/js/admin/pluginList.js">

        <script src="${staticServePath}/js/admin/userList.js">

        <script src="${staticServePath}/js/admin/commentList.js">

        <script src="${staticServePath}/js/admin/plugin.js">

        <script src="${staticServePath}/js/admin/main.js">

        <script src="${staticServePath}/js/admin/about.js">

        <#else>

        <script src="$staticServePath/js/admin/latkeAdmin${miniPostfix}.js?${staticResourceVersion}">

        </#if>

        <#include "admin-label.ftl">

        ${plugins}

        <script >

            admin.inited();

        

全部保存，然后在容器中部署一下，进入后台，工具-偏好设定-参数设置-编辑器类型，选择 UEditor，并点右上角更新按钮。

进入文章发布页面，测试 UEditor 是否可以正常使用

测试结果：文章发布后，代码无法高亮；图片无法正常上传（UEditor 在多级目录的通病）

接下来就是修复这些个问题，那么问题来了，我先去趟茅厕，稍后再写。。。