目录

  富文本编辑器是网站中非常常用的一个组件,无论是网站后台公布信息,前台评论回复发贴富文本编辑器是网站中非常常用的一个组件,无论是网站后台公布信息,前台评论回复发贴等操作typecho 富文本编辑器,都离不开富文本编辑器的身影。

  顶着百度的名头,UEditor是一个功能非常强悍的富文本编辑器。然而不得不说,这货的文档写的实在是太丑了。

  在刚刚开始使用时,就碰到了调用后台配置文件错误的问题,导致上传图片等功能不能使用。

  初见

  什么是UEditor?

  DEMO

  在百度的UEditor官网可以下载至各个版本的编辑器,我选择的是jsp+utf8的版本。

  下载链接

  然后你会惊讶的在底部导航见到“文档”两个大字。

  我对灯立誓,已经仔细的看过了这个文档。

  然而谁要你来教我如何布署jsp啊!!!

  看来只好闭着耳朵摸索前进了,下载出来的文件结构如图所示

  总体虽说清晰明了。后台引用了jsp/lib下的包,然后我阅读了controller.jsp……

  准备工作引进ueditor

  将ueditor放在webapp目录下

  添加Maven支持

  

    
        commons-fileupload
        commons-fileupload
        1.3.1
    
    
        commons-io
        commons-io
        2.4
    
    
        commons-codec
        commons-codec
        1.10
    
    
        org.json
        json
        20160212

  资源访问配置

  单独把ueditor放到至webapp目录下, 因此在springmvc映射处理中须要排除。

  

  引入ueditor源码

  其实作为依赖包引进也可以, 只是引进源码, 方便功能的更改跟加强. 和前一种方式相比, 我格外推荐前者, 即引进源码!

  编辑器初始化Controller

  该controller类效仿了ueditor中原本的controller.jsp的处理代码, 并改成springmvc的这种方式. 注意那边的处理ueditor操作的url path为: /ued/config. 它完成了编辑器初始化, 以及文件/图片的上传处理.

   @Controller

    @RequestMapping("/ue")
    public class UEditorController {
        @RequestMapping(value="/config")
        public void config(HttpServletRequest request, HttpServletResponse response) {
            response.setContentType("application/json");
            String rootPath = request.getSession()
                    .getServletContext().getRealPath("/");
            try {
                String exec = new ActionEnter(request, rootPath).exec();
                PrintWriter writer = response.getWriter();
                writer.write(exec);
                writer.flush();
                writer.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

  配置config.json文件

  config.json文件typecho 富文本编辑器,是定义文件/图片上传的插口,以及各类限制(文件大小上限, MimeType类别框定)。

  具体配置的细节并不重要,这边最重要的是: 放在哪里,以及怎样被调用至?

  放的位置问题,可以自由点,让我们霸道一回,就把config.json文件放置至webapp/conf目录下吧。

  然后怎样被调用至呢?原先ueditor的代码,默认指定了恳求的Context Path。原因还是在jsp版本中,默认controller.jsp跟config.json是同目录。

   private String getConfigPath () {

        return this.parentPath + File.separator + ConfigManager.configFileName;

  然而状况早已发生变化了,若不更改源码会导致找不到配置文件config.json的错误。因为寻求的路径跟跟我们设定的webapp/conf有出路。在类ConfigManager修改后为:

   private String getConfigPath () {

        return this.rootPath
                + File.separator + "conf"
                + File.separator + ConfigManager.configFileName;

  这样就可以了, 这只是为何,我推荐使用源码引进的成因,这只是惟一一处应当还要更改的地方。

  修改ueditor.config.js

  这只是最后一个方法了,我们还要制订编辑器访问服务器的初始地址。

   window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径,这个不能被注释
        UEDITOR_HOME_URL: URL
        // 服务器统一请求接口路径
        //      原先默认的
        //, serverUrl: URL + "jsp/controller.jsp"
        //      修改后的

  注: 修改serverUrl,使得其对准自己的服务器地址。

  这样整个ueditor跟springmvc的集成配置工作就做完了,感觉还是有点撵乌龟上架,却没有详细叙说原理。

  验证

  验证过程,相对比较简略一些。引入编辑框代码,如果编辑器图片能正常上传就OK了:

  

    
    
    这里写你的初始化内容
    
       var editor = UE.getEditor('container');

  在查阅网上资料的时侯, 也见过其他的集成方法的. 比如添加额外的servlet(path只匹配ueditor), 单独处理ueditor的jsp. 这样也能挺好的做到集成, 也省心省力. 不过选用前者, 可以更改图片上传的方式, 比如放置至专门的图片服务器. 这只是服务做大的一个必经之路.

Last modification:December 22nd, 2020 at 04:17 pm
如果觉得我的文章对你有用,请随意赞赏