Monthly Archive: 十月 2018

iFixit Video-iPhone XR Teardown!

The iPhone XR finally joins the 2018 iPhone lineup. Thanks to the aluminum frame and LCD you can get almost everything you love about the iPhone XS, but for less! People are calling the iPhone XR the best value iPhone you can buy, but will it be the most repairable? We’re tearing it down to find out.

iFixit

All contents of the collection site on the Internet, if there is nothing wrong with it over. For infringement, please contact me deleted.

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富文本编辑器已经成功加载上去!