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