这个富文本还是功能挺全的.

官方文档地址

下载地址

常用接口

较完整代码仓库

UEditor下载后直接运行即可访问,但在上传文件时需要单独再做配置.

[很详细的SpringBoot整合UEditor教程]

可选的依赖文件,本案例不采用:

  1.        <dependency>
  2.             <groupId>net.mingsoft</groupId>
  3.             <artifactId>ms-ueditor</artifactId>
  4.             <version>1.0.2</version>
  5.         </dependency>

官方的demo就不多说了.

下面是我设置的富文本,其中可以进行富文本大小的拉缩.当提交数据时,使用 UE.getEditor('container').getContent() 即可获取富文本内容.

如果是发表新闻的话,可以把标题,作者等input内容放入form中,使用jquery.serializejson.js获取json数据,并加上content富文本内容传递给后端.

前端demo.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5.     <title>ueditor demo</title>
  6.  
  7.     <!--配置文件-->
  8.     <script type="text/javascript" src="ueditor.config.js"></script>
  9.     <!--编辑器源码文件-->
  10.     <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
  11.     <script src="/ueditor/ueditor.parse.min.js"></script>
  12.     <script src="/js/jquery-3.1.0.min.js"></script>
  13.     <script src="/js/jquery.serializejson.js"></script>
  14.  
  15. </head>
  16. <body>
  17.     <!--加载编辑器的容器-->
  18.     <script id="container" name="content" type="text/plain"></script>
  19.  
  20. <button id="formBtn">提交</button>
  21.  
  22. <!--实例化编辑器-->
  23. <script type="text/javascript">
  24.     var ue = UE.getEditor('container',{
  25.         //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
  26.         autoHeightEnabled: true, //设置自动长高
  27.         scaleEnabled: true, //是否可以拉伸长高，默认true(当开启时，自动长高失效)
  28.         autoFloatEnabled: false,  //自动浮动,false能适应全部宽度,是否保持toolbar的位置不动，默认true
  29.         initialContent: '请在这里输入要编辑的内容', //富文本提示内容
  30.         autoClearinitialContent: true, //聚焦富文本后清空提示内容
  31.         enableAutoSave: true, //启用自动保存
  32.         imageScaleEnabled: true, //启动图片拉伸缩放
  33.         pasteplain: true, //启用纯文本粘贴
  34.         allHtmlEnabled: false, //提交到后台的数据是否包含整个html字符串
  35.         autoTransWordToList: true, // [默认值：false] //禁止word中粘贴进来的列表自动变成列表标签
  36.         enableContextMenu: true, //右键功能菜单
  37.         maximumWords: 10001, //允许的最大字符数
  38.         tabSize: 4, //点击tab键时移动的距离，tabSize倍数，tabNode什么字符做为单位
  39.         tabNode: '&nbsp;', //tab使用的单位,空格
  40.         tableDragable: true, //表格是否可以拖拽
  41.         sourceEditor: "codemirror",  //源码的查看方式，codemirror是代码高亮，textarea是文本框，默认是codemirror，注意默认codemirror只能在ie8+和非ie中使用
  42.  
  43.     });
  44. </script>
  45.  
  46. <script>
  47.  
  48.     $("#formBtn").click(editorSubmit);
  49.  
  50.     function editorSubmit(){
  51.         // alert("content:"+(UE.getEditor('editor').getContent()));
  52.         $.ajax({
  53.             url:"/editorData",
  54.             type:"POST",
  55.             // data:$("#editor").serializeJSON(),
  56.             data:{"content":UE.getEditor('container').getContent()},
  57.             dataType:"json",
  58.             success:function(data){
  59.                 alert(data);
  60.             }
  61.         });
  62.     }
  63.  
  64. </script>
  65.  
  66. </body>
  67. </html>

对应上面前端的接口

  1. package com.tansuo365.test1.controller.ueditor;
  2.  
  3. import com.tansuo365.test1.ueditor.ActionEnter;
  4. import org.springframework.stereotype.Controller;
  5. import org.springframework.web.bind.annotation.*;
  6.  
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9. import java.io.IOException;
  10. import java.io.PrintWriter;
  11.  
  12. @RequestMapping("")
  13. @Controller
  14. public class UEditorController {
  15.  
  16.     @RequestMapping("/ueditor")
  17.     private String ueditor() {
  18.         return "/news/index";
  19.     }
  20.  
  21.     @RequestMapping("/ueditorDemo")
  22.     private String ueditorDemo() {
  23.         return "/news/demo";
  24.     }
  25.  
  26.     @RequestMapping(value = "/config")
  27.     public void config(HttpServletRequest request, HttpServletResponse response) {
  28.         response.setContentType("application/json");
  29.         String rootPath = request.getSession().getServletContext().getRealPath("/");
  30.         try {
  31.             String exec = new ActionEnter(request, rootPath).exec();
  32.             PrintWriter writer = response.getWriter();
  33.             writer.write(exec);
  34.             writer.flush();
  35.             writer.close();
  36.         } catch (IOException e) {
  37.             e.printStackTrace();
  38.         }
  39.  
  40.     }
  41.  
  42.     //TODO
  43.     @ResponseBody
  44.     @RequestMapping("editorData")
  45.     public Integer testEditor(@RequestParam("content") String content) {
  46.         System.out.println("content:" + content);
  47.         return 1;
  48.     }
  49. }

官方demo: index.html

  1. <!DOCTYPE>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <title>完整demo</title>
  5.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  6.     <script type="text/javascript" charset="utf-8" th:src="@{ueditor.config.js}"></script>
  7.     <script type="text/javascript" charset="utf-8" th:src="@{ueditor.all.js}"> </script>
  8.     <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
  9.     <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
  10.     <script type="text/javascript" charset="utf-8" th:src="@{lang/zh-cn/zh-cn.js}"></script>
  11.  
  12.     <style type="text/css">
  13.         div{
  14.             width:100%;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <div>
  20.     <h1>完整demo</h1>
  21.     <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
  22. </div>
  23. <div id="btns">
  24.     <div>
  25.         <button onclick="getAllHtml()">获得整个html的内容</button>
  26.         <button onclick="getContent()">获得内容</button>
  27.         <button onclick="setContent()">写入内容</button>
  28.         <button onclick="setContent(true)">追加内容</button>
  29.         <button onclick="getContentTxt()">获得纯文本</button>
  30.         <button onclick="getPlainTxt()">获得带格式的纯文本</button>
  31.         <button onclick="hasContent()">判断是否有内容</button>
  32.         <button onclick="setFocus()">使编辑器获得焦点</button>
  33.         <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
  34.         <button onmousedown="setblur(event)" >编辑器失去焦点</button>
  35.  
  36.     </div>
  37.     <div>
  38.         <button onclick="getText()">获得当前选中的文本</button>
  39.         <button onclick="insertHtml()">插入给定的内容</button>
  40.         <button id="enable" onclick="setEnabled()">可以编辑</button>
  41.         <button onclick="setDisabled()">不可编辑</button>
  42.         <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
  43.         <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
  44.         <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
  45.     </div>
  46.  
  47.     <div>
  48.         <button onclick="getLocalData()" >获取草稿箱内容</button>
  49.         <button onclick="clearLocalData()" >清空草稿箱</button>
  50.     </div>
  51.  
  52. </div>
  53. <div>
  54.     <button onclick="createEditor()">
  55.     创建编辑器</button>
  56.     <button onclick="deleteEditor()">
  57.     删除编辑器</button>
  58. </div>
  59.  
  60. <script type="text/javascript">
  61.  
  62.     //实例化编辑器
  63.     //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
  64.     var ue = UE.getEditor('editor');
  65.  
  66.     function isFocus(e){
  67.         alert(UE.getEditor('editor').isFocus());
  68.         UE.dom.domUtils.preventDefault(e)
  69.     }
  70.     function setblur(e){
  71.         UE.getEditor('editor').blur();
  72.         UE.dom.domUtils.preventDefault(e)
  73.     }
  74.     function insertHtml() {
  75.         var value = prompt('插入html代码', '');
  76.         UE.getEditor('editor').execCommand('insertHtml', value)
  77.     }
  78.     function createEditor() {
  79.         enableBtn();
  80.         UE.getEditor('editor');
  81.     }
  82.     function getAllHtml() {
  83.         alert(UE.getEditor('editor').getAllHtml())
  84.     }
  85.     function getContent() {
  86.         var arr = [];
  87.         arr.push("使用editor.getContent()方法可以获得编辑器的内容");
  88.         arr.push("内容为：");
  89.         arr.push(UE.getEditor('editor').getContent());
  90.         alert(arr.join("\n"));
  91.     }
  92.     function getPlainTxt() {
  93.         var arr = [];
  94.         arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
  95.         arr.push("内容为：");
  96.         arr.push(UE.getEditor('editor').getPlainTxt());
  97.         alert(arr.join('\n'))
  98.     }
  99.     function setContent(isAppendTo) {
  100.         var arr = [];
  101.         arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
  102.         UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
  103.         alert(arr.join("\n"));
  104.     }
  105.     function setDisabled() {
  106.         UE.getEditor('editor').setDisabled('fullscreen');
  107.         disableBtn("enable");
  108.     }
  109.  
  110.     function setEnabled() {
  111.         UE.getEditor('editor').setEnabled();
  112.         enableBtn();
  113.     }
  114.  
  115.     function getText() {
  116.         //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
  117.         var range = UE.getEditor('editor').selection.getRange();
  118.         range.select();
  119.         var txt = UE.getEditor('editor').selection.getText();
  120.         alert(txt)
  121.     }
  122.  
  123.     function getContentTxt() {
  124.         var arr = [];
  125.         arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
  126.         arr.push("编辑器的纯文本内容为：");
  127.         arr.push(UE.getEditor('editor').getContentTxt());
  128.         alert(arr.join("\n"));
  129.     }
  130.     function hasContent() {
  131.         var arr = [];
  132.         arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
  133.         arr.push("判断结果为：");
  134.         arr.push(UE.getEditor('editor').hasContents());
  135.         alert(arr.join("\n"));
  136.     }
  137.     function setFocus() {
  138.         UE.getEditor('editor').focus();
  139.     }
  140.     function deleteEditor() {
  141.         disableBtn();
  142.         UE.getEditor('editor').destroy();
  143.     }
  144.     function disableBtn(str) {
  145.         var div = document.getElementById('btns');
  146.         var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
  147.         for (var i = 0, btn; btn = btns[i++];) {
  148.             if (btn.id == str) {
  149.                 UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
  150.             } else {
  151.                 btn.setAttribute("disabled", "true");
  152.             }
  153.         }
  154.     }
  155.     function enableBtn() {
  156.         var div = document.getElementById('btns');
  157.         var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
  158.         for (var i = 0, btn; btn = btns[i++];) {
  159.             UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
  160.         }
  161.     }
  162.  
  163.     function getLocalData () {
  164.         alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
  165.     }
  166.  
  167.     function clearLocalData () {
  168.         UE.getEditor('editor').execCommand( "clearlocaldata" );
  169.         alert("已清空草稿箱")
  170.     }
  171. </script>
  172. </body>
  173. </html>

在java端的application.properties或yml中加入:

  1. #ueditor文件上传路径
  2. web.upload-path=E:/   <<按需改为linux路径
  3. spring.mvc.static-path-pattern=/**
  4. #静态资源,ueditor文件上传路径
  5. spring.resources.static-locations=classpath:/static/,file:${web.upload-path}

同时在ueditor.json或原本的config.json中需要更改basePath和web.upload-path一致(图片/文件上传路径)

其它比较重要的如ConfigManager,3个js文件(ueditor.all.js,ueditor.config.js,ueditor.parse.js),一个ueditor.json文件.

  1. "basePath":"/www/server/apache-tomcat-8.5.32/webapps/ROOT/images/",/* 上传文件的基本路径 */
  2.  

百度UEditor富文本插件的使用的更多相关文章

  1. 百度ueditor富文本编辑器的使用

    百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...

  2. ASP.NET MVC5 中百度ueditor富文本编辑器的使用

    随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...

  3. PHP如何搭建百度Ueditor富文本编辑器

    本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...

  4. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  5. spring boot 整合 百度ueditor富文本

    百度的富文本没有提供Java版本的,只给提供了jsp版本,但是呢spring boot 如果是使用内置tomcat启动的话整合jsp是非常困难得,今天小编给大家带来spring boot整合百度富文本 ...

  6. vue集成百度UEditor富文本编辑器

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...

  7. 百度UEditor(富文本编辑器)的基础用法

    百度的这个编辑器挺强大的,这里只是用他的文本功能,没有介绍上传图片视频的. 我用是的SSH来写的项目. 1. 把下载的UEditor(ueditor1_4_3_1-utf8-jsp)解压后全部复制到W ...

  8. 在IntelliJ IDEA 中配置Ueditor富文本插件

    这是我自学的配置教程,刚刚学习不太完善请谅解! 我会根据我的学习进程对此进行更贴,欢迎关注哦 ! 第一步:下载插件,地址:http://ueditor.baidu.com/website/downlo ...

  9. 百度UEditor富文本编辑器去除过滤div等标签

    将设计排版好的页面html代码上传到数据库,再读取出来的时候发现所有的div都被替换成了p标签. 解决方法: 首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代 ...

随机推荐

  1. go 缓冲IO

    package main import ( "bufio" "fmt" "os" "strings" ) func ma ...

  2. DevOps 什么是 CI/CD？

    CI/CD 是一种通过在应用开发阶段引入自动化来频繁向客户交付应用的方法.CI/CD 的核心概念是持续集成.持续交付和持续部署.作为一个面向开发和运营团队的解决方案,CI/CD 主要针对在集成新代码时 ...

  3. Spring Cloud Alibaba学习笔记（19） - Spring Cloud Gateway 自定义过滤器工厂

    在前文中,我们介绍了Spring Cloud Gateway内置了一系列的内置过滤器工厂,若Spring Cloud Gateway内置的过滤器工厂无法满足我们的业务需求,那么此时就需要自定义自己的过 ...

  4. 入门Docker，你要下载什么？注册什么？

    此随笔根据前人经验改编并亲自实践.遇到问题提供出相应解决方法. 入门Docker,你要下载什么?注册什么? Docker.app你肯定是要下载的!此教程应用于MAC系统PC不保证适用 Docker f ...

  5. javasript简单实现文字的展开收起（无动画）

    今天在工作遇到展开和收起的需求,在网上找了很多方法,今天来写一下我觉得比较简单的方法 在项目中需要达到如图这种效果 首先想的是使用overflow简单且粗暴,在需要展开的的文字定义样式 { overf ...

  6. SQL*Plus 格式化查询结果

    为了在 SQL*Plus 环境中生成符合用户需要规范的报表,SQL*Plus 工具提供了多个用于格式化查询结果的命令,使用这些命令可以实现设置列的标题.定义输出值的显示格式和显示宽度.为报表增加头标题 ...

  7. 移动oracle数据文件的两种方法

    1.alter database方法该方法,可以移动任何表空间的数据文件. ***关闭数据库***SQL> shutdown immediateDatabase closed.Database ...

  8. 关于vue-svg-icon的使用方式

    前言 工作中用到svg格式的图标,既然是svg,当然不想用古老的img方式引用,希望能凭借定义svg的fill属性,随意定义图标的颜色:同时不想将整段svg代码写入组建内,于是找到了使用vue-svg ...

  9. 使用OpenLiveWriter来写博客

    话不多说,首先是下载http://openlivewriter.org/,安装. 博客配置,我是使用博客园,配置如下: 确保博客园自己后台账号"设置"中的"推荐客户端&q ...

  10. MySQL Connection--使用tcpkill杀掉MySQL活跃连接

    当MySQL连接被打满,连管理员也无法本地登录时,可以考虑使用tcpkill杀掉一些应用服务器创建的连接. CentOS 6安装tcpkill rpm安装包: libnids-1.24-1.el6.x ...