百度UEditor富文本插件的使用
这个富文本还是功能挺全的.
UEditor下载后直接运行即可访问,但在上传文件时需要单独再做配置.
可选的依赖文件,本案例不采用:
<dependency>
<groupId>net.mingsoft</groupId>
<artifactId>ms-ueditor</artifactId>
<version>1.0.2</version>
</dependency>
官方的demo就不多说了.
下面是我设置的富文本,其中可以进行富文本大小的拉缩.当提交数据时,使用 UE.getEditor('container').getContent() 即可获取富文本内容.
如果是发表新闻的话,可以把标题,作者等input内容放入form中,使用jquery.serializejson.js获取json数据,并加上content富文本内容传递给后端.
前端demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>ueditor demo</title> <!--配置文件-->
<script type="text/javascript" src="ueditor.config.js"></script>
<!--编辑器源码文件-->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<script src="/ueditor/ueditor.parse.min.js"></script>
<script src="/js/jquery-3.1.0.min.js"></script>
<script src="/js/jquery.serializejson.js"></script> </head>
<body>
<!--加载编辑器的容器-->
<script id="container" name="content" type="text/plain"></script> <button id="formBtn">提交</button> <!--实例化编辑器-->
<script type="text/javascript">
var ue = UE.getEditor('container',{
//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
autoHeightEnabled: true, //设置自动长高
scaleEnabled: true, //是否可以拉伸长高,默认true(当开启时,自动长高失效)
autoFloatEnabled: false, //自动浮动,false能适应全部宽度,是否保持toolbar的位置不动,默认true
initialContent: '请在这里输入要编辑的内容', //富文本提示内容
autoClearinitialContent: true, //聚焦富文本后清空提示内容
enableAutoSave: true, //启用自动保存
imageScaleEnabled: true, //启动图片拉伸缩放
pasteplain: true, //启用纯文本粘贴
allHtmlEnabled: false, //提交到后台的数据是否包含整个html字符串
autoTransWordToList: true, // [默认值:false] //禁止word中粘贴进来的列表自动变成列表标签
enableContextMenu: true, //右键功能菜单
maximumWords: 10001, //允许的最大字符数
tabSize: 4, //点击tab键时移动的距离,tabSize倍数,tabNode什么字符做为单位
tabNode: ' ', //tab使用的单位,空格
tableDragable: true, //表格是否可以拖拽
sourceEditor: "codemirror", //源码的查看方式,codemirror是代码高亮,textarea是文本框,默认是codemirror,注意默认codemirror只能在ie8+和非ie中使用 });
</script> <script> $("#formBtn").click(editorSubmit); function editorSubmit(){
// alert("content:"+(UE.getEditor('editor').getContent()));
$.ajax({
url:"/editorData",
type:"POST",
// data:$("#editor").serializeJSON(),
data:{"content":UE.getEditor('container').getContent()},
dataType:"json",
success:function(data){
alert(data);
}
});
} </script> </body>
</html>
对应上面前端的接口
package com.tansuo365.test1.controller.ueditor; import com.tansuo365.test1.ueditor.ActionEnter;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*; import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter; @RequestMapping("")
@Controller
public class UEditorController { @RequestMapping("/ueditor")
private String ueditor() {
return "/news/index";
} @RequestMapping("/ueditorDemo")
private String ueditorDemo() {
return "/news/demo";
} @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();
} } //TODO
@ResponseBody
@RequestMapping("editorData")
public Integer testEditor(@RequestParam("content") String content) {
System.out.println("content:" + content);
return 1;
}
}
官方demo: index.html
<!DOCTYPE>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>完整demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" charset="utf-8" th:src="@{ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{ueditor.all.js}"> </script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8" th:src="@{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>
在java端的application.properties或yml中加入:
#ueditor文件上传路径
web.upload-path=E:/ <<按需改为linux路径
spring.mvc.static-path-pattern=/**
#静态资源,ueditor文件上传路径
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文件.
"basePath":"/www/server/apache-tomcat-8.5.32/webapps/ROOT/images/",/* 上传文件的基本路径 */
百度UEditor富文本插件的使用的更多相关文章
- 百度ueditor富文本编辑器的使用
百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...
- ASP.NET MVC5 中百度ueditor富文本编辑器的使用
随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...
- PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...
- django之百度Ueditor富文本编辑器后台集成
Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...
- spring boot 整合 百度ueditor富文本
百度的富文本没有提供Java版本的,只给提供了jsp版本,但是呢spring boot 如果是使用内置tomcat启动的话整合jsp是非常困难得,今天小编给大家带来spring boot整合百度富文本 ...
- vue集成百度UEditor富文本编辑器
在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...
- 百度UEditor(富文本编辑器)的基础用法
百度的这个编辑器挺强大的,这里只是用他的文本功能,没有介绍上传图片视频的. 我用是的SSH来写的项目. 1. 把下载的UEditor(ueditor1_4_3_1-utf8-jsp)解压后全部复制到W ...
- 在IntelliJ IDEA 中配置Ueditor富文本插件
这是我自学的配置教程,刚刚学习不太完善请谅解! 我会根据我的学习进程对此进行更贴,欢迎关注哦 ! 第一步:下载插件,地址:http://ueditor.baidu.com/website/downlo ...
- 百度UEditor富文本编辑器去除过滤div等标签
将设计排版好的页面html代码上传到数据库,再读取出来的时候发现所有的div都被替换成了p标签. 解决方法: 首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代 ...
随机推荐
- python3+requests:post请求四种传送正文方式
https://www.cnblogs.com/insane-Mr-Li/p/9145152.html 前言:post请求我在python接口自动化2-发送post请求详解(二)已经讲过一部分了,主要 ...
- idea 中激活 JRebel
JRebel介绍: JRebel是一款JVM插件,它使得Java代码修改后不用重启系统,立即生效.IDEA上原生是不支持热部署的,一般更新了 Java 文件后要手动重启 Tomcat 服务器,修改才能 ...
- bat批处理删除多少天前的文件
@echo off ::演示:删除指定路径下指定天数之前(以文件的最后修改日期为准)的文件. ::如果演示结果无误,把del前面的echo去掉,即可实现真正删除. ::本例需要Win2003/Vist ...
- Java调用WebService方法总结(7)--CXF调用WebService
CXF = Celtix + XFire,继承了Celtix和XFire两大开源项目的精华,是一个开源的,全功能的,容易使用的WebService框架.文中所使用到的软件版本:Java 1.8.0_1 ...
- C++ | 使用const std::map,map::[]时遇到的一个bug
原函数简化后如下: void fun(const map<int,vector<int>> &mp, int index) { for (auto tmp : mp[i ...
- springboot+security整合(2)自定义校验
说明 springboot 版本 2.0.3源码地址:点击跳转 系列 springboot+security 整合(1) springboot+security 整合(2) springboot+se ...
- org.w3c.dom document 和xml 字符串 互转
转自:https://blog.csdn.net/wmyasw/article/details/8686420 package com.mymhotel.opera; import java.io.F ...
- 笔谈FFmpeg(一)
现在的工作是播放器库的开发,可不是调用iOS系统自带的播放器框架进行一些简单的功能和界面定制,这些没什么含量.涉及iOS开发有3个年头了,现在的工作算是有点含金量了.涉及播放器的开发,FFmpeg的架 ...
- 2.kafka 分布式集群安装
Kafka集群安装主节点h201,从节点h202.h2031.安装jdk1.8[hadoop@h201 ~]$ /usr/jdk1.8.0_144/bin/java -version 2.安装zook ...
- MyBatis-Migrations安装和使用
这里本人是在MAC机上安装使用 1. 下载 mybatis-migraions安装包,地址:https://www.oschina.net/news/94218/mybatis-migrations- ...