Category: IT tech

JFinal官方demo整合UEditor详细步骤-番外:图片上传功能

按照上一篇的步骤集成了UEditor后,UEditor可以进行正常编辑,但是你可能会发现进入编辑状态后,单图上传按钮是灰色的无法点击,多图上传按钮点击后显示“后台配置项未正确加载…”。对于此,还需要进行后台配置,本文为添加上传图片功能的说明。

注:在尝试添加图片上传功能的时候我发现JFinal所使用的jetty缺失对jsp的支持,通过单独下载jar包的方式也未能解决。最后使用了JFinal的官方maven demo,通过引入依赖的方式得以解决。所以本文是基于JFinal的maven demo进行操作的。由于maven的便利性,建议大家都使用JFinal的maven版demo。

一、创建一个Controller用于后台处理

src/main/java目录下建立package,并且创建UeditorController.java,如图:

 

UeditorController.java中新建upload方法,用于处理上传任务

public class UeditorController extends Controller {
  public void upload() {
    
    if ("config".equals(getPara("action"))) {
      System.err.println("render: config.json");
      render("/ueditor/jsp/config.json");
      return;
    }
    String path = getSession().getServletContext().getRealPath("/ueditor/jsp/upload/image/");//设置图片保存路径

    UploadFile file = getFile("upfile", "picture"); // 获取文件
    String fileName = file.getFileName();
    
    File pathf = new File(path);
    if (!pathf.exists()) {
      pathf.mkdirs();
    }

    String type = file.getFileName().substring(file.getFileName().lastIndexOf(".")); // 获取文件的后缀
    fileName = System.currentTimeMillis() + type; // 对文件重命名取得的文件名+后缀
    String dest = path + "/" + fileName;
    file.getFile().renameTo(new File(dest));

    String realPic = "/ueditor/jsp/upload/image/" + fileName;
    
    //此处添加修改了一些返回信息,官方文档里没有说明返回信息,只有按照官方demo的返回信息来
    
    setAttr("name", fileName);
    setAttr("original", fileName);
    setAttr("size", file.getFile().length());
    setAttr("type", type);
    setAttr("state", "SUCCESS");
    setAttr("url", realPic);
    setAttr("message", "文件上传成功!");
    renderJson();

  }
}

 

二、修改UEditor配置文件

找到ueditor根目录下的ueditor.config.js文件,将其中的

, serverUrl: URL + "jsp/controller.jsp"

注释掉,添加

, serverUrl: "/ueditor/upload"

 

如下图:

三、添加前台路由

DemoConfig.javaconfigRoute(Routes me)方法中添加一条路由

me.add("/ueditor", UeditorController.class);

 

如下:

四、验证

确保所有编辑过的工程文件均已保存且JFinal已全部加载成功。进入到文章编辑页面,此时可以看到“单图上传”按钮已经可以点击,并且“多图上传”按钮点下后的弹窗也无报错信息。

 

点击上图所示的“单图上传”按钮,选择任一图片进行上传。注意,你可能发现上传后界面是这样的:

 

而实际上,选择上传的图片是这样的:

 

可以看到在我们选择了上传图片后,图片未能全部展现出来。这个问题是UEditor编辑器的一个Bug,建议先点击上传,然后再回来查看修改,此时显示就正确了。如下图:

JFinal官方demo整合UEditor详细步骤

一、导入JFinal官方demo

JFinal官方demo,可以在JFinal官网直接下载到。

下载JFinal demo

在eclipse中进行导入。我进行的是非maven式开发导入,也就是使用JFinal依赖的jar包进行开发。

确保导入成功且能正确运行起来,访问http://localhost:[相应端口],可以访问如下界面:

 

JFinal demo首页

此时尝试点击任一栏目的“修改”按钮,可以进入修改编辑页面,看到此时为demo原生的样式。

 

JFinal demo的文章编辑页面

二、下载并导入UEditor

UEditor是百度开源的富文本编辑器,这是下载页面

 

UEditor下载页面

下载上图标注的选项,下载成功后为名为ueditor1_4_3_3-utf8-jsp.zip 1的压缩包,进行解压,解压后的文件目录如下所示:

 
  • dialogs: 弹出对话框对应的资源和JS文件
  • lang: 编辑器国际化显示的文件
  • jsp: 涉及到服务器端操作的后台文件
  • themes: 样式图片和样式文件
  • third-party: 第三方插件(包括代码高亮,源码编辑等组件)
  • ueditor.all.js: 开发版代码合并的结果,目录下所有文件的打包文件
  • ueditor.all.min.js: ueditor.all.js文件的压缩版,建议在正式部署时采用
  • ueditor.config.js: 编辑器的配置文件,建议和编辑器实例化页面置于同一目录
  • ueditor.parse.js: 编辑的内容显示页面引用,会自动加载表格、列表、代码高亮等样式
  • ueditor.parse.min.js: ueditor.parse.js文件的压缩版,建议在内容展示页正式部署时采用

在JFinal demo工程中的WebRoot目录下创建ueditor文件夹,将上面解压出的所有东西拷贝进去。

拷入UEditor后的工程

在ueditor目录下的index.html为UEditor的官方demo,可以在浏览器中输入http://localhost[端口]/ueditor/index.html访问,可以看到如下UEditor的样式。

 

UEditor的官方demo

接下来,我们要做的就是将上面展示的UEditor富文本编辑器整合进JFinal的文章编辑。

三、整合JFinal与UEditor

首先我们得知道,JFinal demo的前端文章编辑页面所对应的代码文件在哪,我在下图已经标注了出来:

通过对_form.html, add.html, blog.html, edit.html的分析可以发现,文章编辑功能都是通过_form.html进行的。整合UEditor,首先需要导入对应的js脚本,找到<head>标签。<head>标签在_layout.html中,_layout.html位置如下图:

_layout.html<head>标签中加入如下的js引用:

<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

注意,确保这里的src路径和前面拷贝ueditor的路径是对应的

添加好后如下图:

接下来需要进行编辑器初始化。首先找到_form.html中“编辑框”对应的代码。在这里是一个<textarea>标签,记住这个标签的id(如果此标签没有id的话就加上一个id)。

 

将<textarea>便签的id设置为”content

回到_layout.html,在<body>标签中加入编辑器的初始化代码,如下:

<script type="text/javascript">
    var ue = UE.getEditor('content');
</script>

将修改过的各个文件保存,刷新浏览器,进入到JFinal demo的文章编辑页面,此时我们看到UEditor富文本编辑器已经成功加载上去!

Foreword about Swing

Seems that Java is rarely used in PC interface developing, we may choose QT, MFC, .NET and so on. So many tools available, and they are both powerful and convenient!

I was recently told to teach swing for new students in the lab, so I spent a few days learning about it.

Differ from other tools in PC interface developing, swing is very easy to get started! The following is excerpted from Wikipedia.

Example Swing widgets in Java Swing is a GUI widget toolkit for Java. It is part of Oracle’s Java Foundation Classes (JFC) – an API for providing a graphical user interface (GUI) for Java programs. Swing was developed to provide a more sophisticated set of GUI components than the earlier Abstract Window Toolkit (AWT). Swing provides a look and feel that emulates the look and feel of several platforms, and also supports a pluggable look and feel that allows applications to have a look and feel unrelated to the underlying platform. It has more powerful and flexible components than AWT. In addition to familiar components such as buttons, check boxes and labels, Swing provides several advanced components such as tabbed panel, scroll panes, trees, tables, and lists. Unlike AWT components, Swing components are not implemented by platform-specific code. Instead, they are written entirely in Java and therefore are platform-independent. The term “lightweight” is used to describe such an element.Swing(Java)-Wikipedia

Swing is supported in native Java, it goes with no need for extra tools as long as Java environment configured correctly.

In the following a few days, I will go on learning about it and prepare my presentation PPT. I’ll also update my blogs for the convenience of teaching, so, they’ll be posted in Chinese.

Cool Skills: Launch applications from command line in Windows

Most of the time, we launch an application by double-clicking its icon on desktop. How about doing that in a special way? A way that makes you different from everyone around you, a way that is more convenient sometimes, a way that is more coder-styled, the most important, a way that makes launching an application become a COOL thing!

Questions to forward, well at first, I’d like to show you how I lunch an application from a command line:

As you can see, firstly, press down win+r, input cmd, and then hit Enter, the command window turns up. I launched chrome by inputting start chrome, and then, hit Enter. Soonly, the chrome window showed up. So, how do I launch it by typing start chrome in command line? Well actually, this is very simple, all you need to do is to move or copy your applications’ launching shortcuts into a single folder, then, add the folder’s path to environment variables. The command START is a built-in command in Windows, use it to execute an executable file(.exe), you’ll get it launched!

Gather your launching shortcut into a single folder

For example, I move my Chrome shortcut into a folder and renamed it to “chrome”, the folder’s path is “E:\path”. Don’t forget the path!

Add the path to environment variables

There is a variable named “path” in environment variables, add “E:\path” to path.

E:\path

Verify it!

If you did everything right, input start chrome and hit Enter in command line, Chrome browser should appear.

 

Also, you can create a shortcut of your path folder, rename it like “openpath”(this is how I did it), and move it into this folder itself! So when you need open this folder to add or remove shortcuts, you can simply input start openpath, the folder will show up immediately!

The transformation of urllib2’s usage in Python3

Usage of urllib2 in Python

In Python, we can simply type the following code to import urllib2:

1
import urllib2

Then, urllib2.Request(host) and urllib2.urlopen(request) is available to use:

1
2
request = urllib2.Request(host)
response = urllib2.urlopen(request)

But, when it comes to Python3, a newer version of Python which has a lot differences with Python2, things gonna has to change!

Usage of urllib2 in Python3

In Python3, we cannot just type “import urllib2” to get it done, you’ll find an error message “No module named urllib2“. This is because of a different usage of urllib2 in python3. The following is my current solution:

Use the following code to import:

1
from urllib.request import Request

Then, here is how I use them:

1
2
request=Request(host)
response=urllib.request.urlopen(request)

Conversion between Timestamp and date, Java-based.

Sometimes, we need to do some conversions between timestamp and date. Here are my solutions.

1. Converting date to timestamp


1
2
3
4
5
6
public static long dateToStamp(String s) throws ParseException{
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        Date date = simpleDateFormat.parse(s);
        long ts = date.getTime();
        return ts;
}

2.Converting timestamp to date


1
2
3
4
5
6
7
public static String stampToDate(long s){
        String res;
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        Date date = new Date(s);
        res = simpleDateFormat.format(date);
        return res;
}

 

Don’t forget to import  java.util.Date and  java.text.SimpleDateFormat.