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阶段是比较简单的.

请注意要排除静态资源

<!-- 4.1 静态资源排除方案1 -->
<mvc:default-servlet-handler default-servlet-name="default"/>

将下载的文档解压后,复制到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+"/";
      %>
      <!DOCTYPE HTML>
      <html>
          <head>
              <base href="<%=basePath%>">
              <meta charset="UTF-8">
              <title>富文本编辑器</title>
              <script type="text/javascript" charset="utf-8" src="resource/ueditor/ueditor.config.js"></script>
              <script type="text/javascript" charset="utf-8" src="resource/ueditor/ueditor.all.min.js"> </script>
              <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
              <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
              <script type="text/javascript" charset="utf-8" src="resource/ueditor/lang/zh-cn/zh-cn.js"></script>
              <style type="text/css">
                  div{
                      width:100%;
                  }
              </style>
      </head>
      <body>
          <div>
              <h1>完整demo</h1>
              <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
          </div>
          <div id="btns">
              <div>
                  <button onclick="getAllHtml()">获得整个html的内容</button>
                  <button onclick="getContent()">获得内容</button>
                  <button onclick="setContent()">写入内容</button>
                  <button onclick="setContent(true)">追加内容</button>
                  <button onclick="getContentTxt()">获得纯文本</button>
                  <button onclick="getPlainTxt()">获得带格式的纯文本</button>
                  <button onclick="hasContent()">判断是否有内容</button>
                  <button onclick="setFocus()">使编辑器获得焦点</button>
                  <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
                  <button onmousedown="setblur(event)" >编辑器失去焦点</button>
          
              </div>
              <div>
                  <button onclick="getText()">获得当前选中的文本</button>
                  <button onclick="insertHtml()">插入给定的内容</button>
                  <button id="enable" onclick="setEnabled()">可以编辑</button>
                  <button onclick="setDisabled()">不可编辑</button>
                  <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
                  <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
                  <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
              </div>
          
              <div>
                  <button onclick="getLocalData()" >获取草稿箱内容</button>
                  <button onclick="clearLocalData()" >清空草稿箱</button>
              </div>
          
          </div>
          <div>
              <button onclick="createEditor()">
              创建编辑器</button>
              <button onclick="deleteEditor()">
              删除编辑器</button>
          </div>
          
          <script type="text/javascript">
          
              //实例化编辑器
              //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
              var ue = UE.getEditor('editor');
          
          
              function isFocus(e){
                  alert(UE.getEditor('editor').isFocus());
                  UE.dom.domUtils.preventDefault(e)
              }
              function setblur(e){
                  UE.getEditor('editor').blur();
                  UE.dom.domUtils.preventDefault(e)
              }
              function insertHtml() {
                  var value = prompt('插入html代码', '');
                  UE.getEditor('editor').execCommand('insertHtml', value)
              }
              function createEditor() {
                  enableBtn();
                  UE.getEditor('editor');
              }
              function getAllHtml() {
                  alert(UE.getEditor('editor').getAllHtml())
              }
              function getContent() {
                  var arr = [];
                  arr.push("使用editor.getContent()方法可以获得编辑器的内容");
                  arr.push("内容为:");
                  arr.push(UE.getEditor('editor').getContent());
                  alert(arr.join("\n"));
              }
              function getPlainTxt() {
                  var arr = [];
                  arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
                  arr.push("内容为:");
                  arr.push(UE.getEditor('editor').getPlainTxt());
                  alert(arr.join('\n'))
              }
              function setContent(isAppendTo) {
                  var arr = [];
                  arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
                  UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
                  alert(arr.join("\n"));
              }
              function setDisabled() {
                  UE.getEditor('editor').setDisabled('fullscreen');
                  disableBtn("enable");
              }
          
              function setEnabled() {
                  UE.getEditor('editor').setEnabled();
                  enableBtn();
              }
          
              function getText() {
                  //当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容
                  var range = UE.getEditor('editor').selection.getRange();
                  range.select();
                  var txt = UE.getEditor('editor').selection.getText();
                  alert(txt)
              }
          
              function getContentTxt() {
                  var arr = [];
                  arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
                  arr.push("编辑器的纯文本内容为:");
                  arr.push(UE.getEditor('editor').getContentTxt());
                  alert(arr.join("\n"));
              }
              function hasContent() {
                  var arr = [];
                  arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
                  arr.push("判断结果为:");
                  arr.push(UE.getEditor('editor').hasContents());
                  alert(arr.join("\n"));
              }
              function setFocus() {
                  UE.getEditor('editor').focus();
              }
              function deleteEditor() {
                  disableBtn();
                  UE.getEditor('editor').destroy();
              }
              function disableBtn(str) {
                  var div = document.getElementById('btns');
                  var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
                  for (var i = 0, btn; btn = btns[i++];) {
                      if (btn.id == str) {
                          UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
                      } else {
                          btn.setAttribute("disabled", "true");
                      }
                  }
              }
              function enableBtn() {
                  var div = document.getElementById('btns');
                  var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
                  for (var i = 0, btn; btn = btns[i++];) {
                      UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
                  }
              }
          
              function getLocalData () {
                  alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
              }
          
              function clearLocalData () {
                  UE.getEditor('editor').execCommand( "clearlocaldata" );
                  alert("已清空草稿箱")
              }
          </script>
      </body>
      </html>
      
    • 代码说明

      引入UEditor的库

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

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

      <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
      

      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

    <div>
      <h1>完整demo</h1>
      <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
    </div>
    
    <script type="text/javascript">
      //实例化编辑器
      var ue = UE.getEditor('editor',{
        toolbars: [
          ['blockquote', 'bold','italic','underline','|', 'strikethrough','subscript','fontborder', 'superscript','|','justifyleft','justifyright', 'justifycenter','justifyjustify','spechars','emotion' ],
          ['insertcode','fontfamily','fontsize','forecolor','backcolor','|','simpleupload','insertimage',]
        ]
      });
    </script>
    
    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

      <div>
          <h1>完整demo</h1>
          <script id="editor" type="text/plain" ></script>
      </div>
      
      <script type="text/javascript">
          //实例化编辑器
          var ue = UE.getEditor('editor',{
              toolbars: [
                  ['blockquote', 'bold','italic','underline','|', 'strikethrough','subscript','fontborder', 'superscript','|','justifyleft','justifyright', 'justifycenter','justifyjustify','spechars','emotion' ],
                  ['insertcode','fontfamily','fontsize','forecolor','backcolor','|','simpleupload','insertimage',]
              ],
              autoHeightEnabled:false,
              initialContent:"胖先森带你学习",
              initialFrameWidth:700,
              initialFrameHeight:400
          });
      </script>
    

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+"/";
%>
<!DOCTYPE HTML>
<html>
    <head>
        <base href="<%=basePath%>">
        <meta charset="UTF-8">
        <title>H5模版:</title>
        <script type="text/javascript" charset="utf-8" src="resource/ueditor/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="resource/ueditor/ueditor.all.min.js"> </script>
        <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
        <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
        <script type="text/javascript" charset="utf-8" src="resource/ueditor/lang/zh-cn/zh-cn.js"></script>
        <style type="text/css">
            div{
                width:100%;
            }
        </style>
</head>
<body>
    <form action="add" method="post">
    <div>
        <h1>完整demo</h1>
        <script id="editor" type="text/plain" name="content" ></script>
    </div>
    <button>提交数据显示高亮显示</button>
    </form>
    
    
    <script type="text/javascript">
        //实例化编辑器
        var ue = UE.getEditor('editor',{
            toolbars: [
                ['blockquote', 'bold','italic','underline','|', 'strikethrough','subscript','fontborder', 'superscript','|','justifyleft','justifyright', 'justifycenter','justifyjustify','spechars','emotion' ],
                ['insertcode','fontfamily','fontsize','forecolor','backcolor','|','simpleupload','insertimage',]
            ],
            autoHeightEnabled:false,
            initialContent:"胖先森带你学习",
            initialFrameWidth:700,
            initialFrameHeight:400
        });
    </script>
</body>
</html>

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库,渲染

<html>
    <head>
        <base href="<%=basePath%>">
        <meta charset="UTF-8">
        <title>H5模版:</title>
        <link href="resource/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="resource/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
    </head>
    <body>
        <p>
          ${content }
        </p>
    <script type="text/javascript">
    SyntaxHighlighter.all();
    </script>
    </body>
</html>
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 );
    
%>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容

  • 文章分类 后台文章分类列表页模板导的详细步骤建立数据表blog_category,并添加相应的文章字段使用php ...
    JoyceZhao阅读 1,702评论 0 12
  • @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 1,153评论 0 0
  • 以下是常用的代码收集,学习用。转自豪情博客园 1. PC - js 返回指定范围的随机数(m-n之间)的公式 re...
    自由加咖啡阅读 996评论 0 1
  • 1.背景介绍 在做Web应用时,经常会进行富文本编辑,常用的富文本编辑器有很多,比如CuteEditor、CKEd...
    维克拉玛蒂亚阅读 2,208评论 0 0
  • 文、画/云尘 首先,不管你是创作还是临摹,寻找素材都是有必要的。哪怕你只是画个苹果,也是可以严谨的去找张素材来参照...
    云影拂尘阅读 824评论 28 38