上段时间发现一个很有意思的开源博客系统,于是自己搭建了一下,在上面发布了一篇小文章,并且吐槽了一下它。 记得当时有朋友评论建议我将UEditor的支持发布到GitHub上,只不过我这里因为装了tfs,并且我这个破烂的Eclipse跟github插件有点儿冲突,就没有将其上传。 不过本着共同学习的精神,我把solo增加U ..

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

本贴最后更新于 1184 天前,其中的信息可能已经沧海桑田

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

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

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

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

  QQ截图20160622154030.jpg

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

QQ截图20160622154253.jpg

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


QQ截图20160622154634.jpg这里有的朋友会看到红叉叉,可以自己拿源码修复一下,也可以直接忽略。

这里其实你可以删除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 }              }     } };</pre><p>修改src\main\webapp\admin-index.ftl</p><p>    在尾部添加editorUeditor.js的引用</p><pre class="brush: html;toolbar:false"><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>         <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>         <script src="{staticServePath}/js/lib/jquery/jquery.bowknot.min.js?{staticResourceVersion}"></script>         <script src="{servePath}/js/lib/tiny_mce/tiny_mce.js">
        <script src="{staticServePath}/js/lib/KindEditor/kindeditor-min.js"></script>         <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>         <script src="{staticServePath}/js/admin/editor.js">
        <script src="{staticServePath}/js/admin/editorTinyMCE.js"></script>         <script src="{staticServePath}/js/admin/editorKindEditor.js">
        <script src="{staticServePath}/js/admin/editorCodeMirror.js"></script>         <!-- EUditor集成组件 -->         <script src="{staticServePath}/js/admin/editorUeditor.js">
        
        <script src="{staticServePath}/js/admin/tablePaginate.js"></script>         <script src="{staticServePath}/js/admin/article.js">
        <script src="{staticServePath}/js/admin/comment.js"></script>         <script src="{staticServePath}/js/admin/articleList.js">
        <script src="{staticServePath}/js/admin/draftList.js"></script>         <script src="{staticServePath}/js/admin/pageList.js">
        <script src="{staticServePath}/js/admin/others.js"></script>         <script src="{staticServePath}/js/admin/linkList.js">
        <script src="{staticServePath}/js/admin/preference.js"></script>         <script src="{staticServePath}/js/admin/pluginList.js">
        <script src="{staticServePath}/js/admin/userList.js"></script>         <script src="{staticServePath}/js/admin/commentList.js">
        <script src="{staticServePath}/js/admin/plugin.js"></script>         <script src="{staticServePath}/js/admin/main.js">
        <script src="{staticServePath}/js/admin/about.js"></script>         <#else>         <script src="{staticServePath}/js/admin/latkeAdmin{miniPostfix}.js?{staticResourceVersion}">
        </#if>
        <#include "admin-label.ftl">
        ${plugins}
        <script >
            admin.inited();
        

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

QQ截图20160622152815.jpg

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

QQ截图20160622160428.jpg

测试结果:文章发布后,代码无法高亮;图片无法正常上传(UEditor 在多级目录的通病)

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

  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。

    Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!
    具体细节请浏览 B3log 构思

    787 引用 • 5867 回帖 • 686 关注
  • UEditor
    3 引用 • 11 回帖
  • 插件
    43 引用 • 138 回帖
9 回帖   
请输入回帖内容...
  • shengkai  

    自己给自己回复(^-^)

  • dsadsa API  

    ddsadsadsadsa

  • 123123 API  

  • 123123 API  

  • shengkai API  

    谁干的[em08]

  • ComBot API  

  • ComBot API  

    */

  • zjhch123  

    学习了!

  • someone API  

    测试一发xss?
    < script >
    alert(‘hello world’);
    </ script >

请输入回帖内容 ...