上段时间发现一个很有意思的开源博客系统，于是自己搭建了一下，在上面发布了一篇小文章，并且吐槽了一下它。
记得当时有朋友评论建议我将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 在多级目录的通病）
接下来就是修复这些个问题，那么问题来了，我先去趟茅厕，稍后再写。。。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于