010.UEditor文档

UEditor的简单使用

在Java Web阶段和SSM框架阶段,我们的课程设计中都会使用到富文本编辑器,目前流行的编辑器很多

KindEditor/CKEditor/UEditor/WangEditor等,这里我们使用的是百度开源的,这里我们使用JSP的版本

这部分属于自学内容,请各位同学根据文档完成下面配置过程

1.下载UEditor

网址: http://ueditor.baidu.com/website/download.html

image

2.新建动态的Web项目

因为我使用的是SpringMVC框架,如果使用Java Web阶段是比较简单的.

请注意要排除静态资源

将下载的文档解压后,复制到WebContent的resource文件夹下,如图所示:

image

3.显示富文本编辑器

• 添加UEditor需要的Jar包

  

  image

  将红色部分的jar包复制添加到WEB-INF/lib下

• 显示富文本编辑器

  根据示例中的index.html或者官方文档给的示例,将富文本编辑器进行显示,因为我们将所有的JSP都放置到WEB-INF文件夹

  • 新建Controller完成跳转

    @Controller
    public class TestController {
        @GetMapping("/show")
        public String showUE(){
            return "jsp/ueditor";
        }
    }
    

  • 显示富文本编辑器ueditor.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    
        
            
            
            
            
            
            
            
            
            
    
    
        
    
            
    完整demo
            
        
        
    
            
    
                获得整个html的内容
                获得内容
                写入内容
                追加内容
                获得纯文本
                获得带格式的纯文本
                判断是否有内容
                使编辑器获得焦点
                编辑器是否获得焦点
                编辑器失去焦点
        
            
            
    
                获得当前选中的文本
                插入给定的内容
                可以编辑
                不可编辑
                隐藏编辑器
                显示编辑器
                设置高度为300默认关闭了自动长高
            
        
            
    
                获取草稿箱内容
                清空草稿箱
            
        
        
        
    
            
            创建编辑器
            
            删除编辑器
        
        
        
    
    
    

  • 代码说明

    引入UEditor的库

    显示编辑器的标签,这个标签跟以往的标签不一样,但是最终的目的也是会生成textarea标签

    id很重要,会根据id进行对富文本编辑器的渲染,代码如下

    //实例化编辑器
    var ue = UE.getEditor('editor');
    

    

    image
    

    image

    但是这个时候,图片功能无法使用,需要修改一下配置

    resource/ueditor/jsp/config.json需要修改里面的前缀 /mvc为发布路径

    "imageUrlPrefix": "/mvc",

    "scrawlUrlPrefix": "/mvc",

    "snapscreenUrlPrefix": "/mvc",

    "catcherUrlPrefix": "/mvc",

    "videoUrlPrefix": "/mvc",

    "fileUrlPrefix": "/mvc",

    "imageManagerUrlPrefix": "/mvc",

    "fileManagerUrlPrefix": "/mvc",

    

    image

4.自定义风格

• 定制工具栏图标

  请参考官方文档: http://fex.baidu.com/ueditor/#start-toolbar

  
    
  完整demo
    
  
  
  
  

  

  image

• 其他配置说明

  autoHeightEnabled {Boolean} [默认值：true] //是否自动长高，默认true

  autoFloatEnabled [默认值：true] //是否保持toolbar的位置不动，默认true

  initialContent {String} [默认值：'欢迎使用ueditor!'] //初始化编辑器的内容，

  initialFrameWidth {Number} [默认值：1000] //初始化编辑器宽度，默认1000

  initialFrameHeight {Number} [默认值：320] //初始化编辑器高度，默认320

  参考网址: http://fex.baidu.com/ueditor/#start-config

    
  
        
  完整demo
        
    
    
    
  

5.代码高亮显示

JSP页面设置提交表单

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    //项目的发布路径，例如:  /rabc
    String path = request.getContextPath();
    /*
    全路径，形式如下: http://127.0.0.1:8001/rbac/
    request.getScheme()      ——> http 获取协议
    request.getServerName()  --> 127.0.0.1 获取服务名
    request.getServerPort()  --> 8001 获取端口号
    path                     --> /rbac 获取访问的路径 路
    */
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


    
        
        
        
        
        
        
        
        
        


    

    

        
完整demo
        
    
    提交数据显示高亮显示
    
    
    
    

Controller获取数据

@Controller
public class TestController {

    @GetMapping("/show")
    public String showUE(){
        return "jsp/ueditor";
    }

    @PostMapping("/add")
    public String add(String content,Model model){
        model.addAttribute("content", content);
        return "jsp/show";
    }
}

show.jsp显示高亮的代码

引入高亮显示的css和js库,渲染

    
        
        
        
        
        
    
    
        

          ${content }
        
    
    

image

备注修改了controller.jsp,需要注意工作空间和tomcat中不能含有中文,否则在线管理不好用

<%@ page language="java" contentType="text/html; charset=UTF-8"
    import="com.baidu.ueditor.ActionEnter"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%

    request.setCharacterEncoding( "utf-8" );
    response.setHeader("Content-Type" , "text/html");
    
    String rootPath = application.getRealPath( "/" );
    String action = request.getParameter("action"); 
    String result = new ActionEnter( request, rootPath ).exec() ;
    
    if( action!=null && (action.equals("listfile") || action.equals("listimage") ) ){  
                rootPath = rootPath.replace("\\", "/");  
                System.out.println("rootPath:"+rootPath);
                result = result.replaceAll(rootPath, "/");  
                System.out.println("result:"+result);
    }  
    out.write( result );
    
%>