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

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

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

记得当时有朋友评论建议我将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
}
   
   
     }
    }
};

修改 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,并点右上角更新按钮。

QQ截图20160622152815.jpg

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

QQ截图20160622160428.jpg

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

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

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
请输入回帖内容 ...

推荐标签 标签

  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 58 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 67 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 134 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 407 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 94 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 51 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    179 引用 • 995 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 62 关注
  • OnlyOffice
    4 引用 • 3 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    125 引用 • 169 回帖 • 1 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 31 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖 • 1 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 1 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1434 引用 • 10054 回帖 • 490 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1387 回帖 • 283 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 664 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 362 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 463 关注