springmvc下富文本UEditor的使用

最新推荐文章于 2021-06-19 03:43:54 发布
最新推荐文章于 2021-06-19 03:43:54 发布
阅读量1.6k 收藏
点赞数
分类专栏： javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuyunshengsir/article/details/70087232
版权

1.下载地址

http://wordonline.bj.bcebos.com/umeditor_release/umeditor1.2.3-utf8-jsp.zip

2.将其放在webapp/umeditor1.2.3下（推荐）如果放在webapp/WEB-INF/下会导致各种问题。

3.资源访问配置

单独把ueditor放入到webapp目录下, 因此在springmvc映射处理中需要排除.
<!-- 静态资源映射 --> 
<mvc:resources mapping="/static/**" location="/WEB-INF/static/" />
<mvc:resources mapping="/umeditor1.2.3/**" location="/umeditor1.2.3/" />


4.将Uploader.java放在src下的包中，然后修改umeditor1.2.3/jsp/imageUp.jsp文件

5.使用界面的页面引入相关的js和css

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    	<script src="a.js"></script>
    
    
    
    <link href="umeditor1.2.3/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="umeditor1.2.3/third-party/jquery.min.js"></script>
    <script type="text/javascript" src="umeditor1.2.3/third-party/template.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="umeditor1.2.3/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="umeditor1.2.3/umeditor.min.js"></script>
    <script type="text/javascript" src="umeditor1.2.3/lang/zh-cn/zh-cn.js"></script>
    
    
    <style type="text/css">
    	 h1{
            font-family: "微软雅黑";
            font-weight: normal;
        }
        .btn {
            display: inline-block;
            *display: inline;
            padding: 4px 12px;
            margin-bottom: 0;
            *margin-left: .3em;
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            text-align: center;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
            vertical-align: middle;
            cursor: pointer;
            background-color: #f5f5f5;
            *background-color: #e6e6e6;
            background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
            background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
            background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
            background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
            background-repeat: repeat-x;
            border: 1px solid #cccccc;
            *border: 0;
            border-color: #e6e6e6 #e6e6e6 #bfbfbf;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            border-bottom-color: #b3b3b3;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            *zoom: 1;
            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .btn:hover,
        .btn:focus,
        .btn:active,
        .btn.active,
        .btn.disabled,
        .btn[disabled] {
            color: #333333;
            background-color: #e6e6e6;
            *background-color: #d9d9d9;
        }

        .btn:active,
        .btn.active {
            background-color: #cccccc \9;
        }

        .btn:first-child {
            *margin-left: 0;
        }

        .btn:hover,
        .btn:focus {
            color: #333333;
            text-decoration: none;
            background-position: 0 -15px;
            -webkit-transition: background-position 0.1s linear;
            -moz-transition: background-position 0.1s linear;
            -o-transition: background-position 0.1s linear;
            transition: background-position 0.1s linear;
        }

        .btn:focus {
            outline: thin dotted #333;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        .btn.active,
        .btn:active {
            background-image: none;
            outline: 0;
            -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .btn.disabled,
        .btn[disabled] {
            cursor: default;
            background-image: none;
            opacity: 0.65;
            filter: alpha(opacity=65);
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }
    </style>
</head>
<body>

<%-- <jsp:include page="./cms/index.jsp"></jsp:include>
 --%><%-- <%@ include file="NewFile.jsp" %> --%>
<%@ include file="/WEB-INF/page/common_import/header.jsp" %>

 

<!-- <form class="form-horizontal" role="form"  > -->

    <div class="form-group col-sm-12">
		<label for="name">新闻标题：</label>
		<input type="text" class="form-control" id="newsTitle" 
				   placeholder="新闻标题">
	</div>
	<div class="form-group col-sm-12">
		<label for="name">新闻来源：</label>
		<input type="text" class="form-control" id="newsSource" 
				   placeholder="新闻来源">
	</div>
	<div class="form-group col-sm-12">
		<label for="name">新闻类型：</label>
		<input type="text" class="form-control" id="newsType" 
				   placeholder="新闻类型">
	</div>
	
	<div class="form-group col-sm-12">
		<label for="name">新闻首页导航图片：</label>
		<input type="text" class="form-control" id="newsImg" 
				   placeholder="新闻类型">
	</div>
	
	<div class="form-group col-sm-12">
		<label for="name">新闻内容：</label>
		 
		<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
    <p>新闻内容。。。。。。http://blog.csdn.net/liuyunshengsir/article/details/52816883</p>
</script>
<script type="text/javascript">
    //实例化编辑器
    var um = UM.getEditor('myEditor');
    um.addListener('blur',function(){
        $('#focush2').html('编辑器失去焦点了')
    });
    um.addListener('focus',function(){
        $('#focush2').html('')
    });
    //按钮的操作
    function insertHtml() {
        var value = prompt('插入html代码', '');
        um.execCommand('insertHtml', value)
    }
    function isFocus(){
        alert(um.isFocus())
    }
    function doBlur(){
        um.blur()
    }
    function createEditor() {
        enableBtn();
        um = UM.getEditor('myEditor');
    }
    function getAllHtml() {
        alert(UM.getEditor('myEditor').getAllHtml())
    }
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UM.getEditor('myEditor').getContent());
        alert(arr.join("\n"));
    }
    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(UM.getEditor('myEditor').getPlainTxt());
        alert(arr.join('\n'))
    }
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用umeditor')方法可以设置编辑器的内容");
        UM.getEditor('myEditor').setContent('欢迎使用umeditor', isAppendTo);
        alert(arr.join("\n"));
    }
    function setDisabled() {
        UM.getEditor('myEditor').setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        UM.getEditor('myEditor').setEnabled();
        enableBtn();
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = UM.getEditor('myEditor').selection.getRange();
        range.select();
        var txt = UM.getEditor('myEditor').selection.getText();
        alert(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(UM.getEditor('myEditor').getContentTxt());
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(UM.getEditor('myEditor').hasContents());
        alert(arr.join("\n"));
    }
    function setFocus() {
        UM.getEditor('myEditor').focus();
    }
    function deleteEditor() {
        disableBtn();
        UM.getEditor('myEditor').destroy();
    }
    function disableBtn(str) {
        var div = document.getElementById('btns');
        var btns = domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                btn.setAttribute("disabled", "true");
            }
        }
    }
    function enableBtn() {
        var div = document.getElementById('btns');
        var btns = domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            domUtils.removeAttributes(btn, ["disabled"]);
        }
    }
</script>
	</div>





	 
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button   class="btn btn-default" οnclick="cms_CmsNews_insert();">提交</button>
			<button type="submit" class="btn btn-default">取消</button>
		</div>
	</div>
<!-- </form> -->

 




















<script type="text/javascript">

function cms_CmsNews_insert1(){
	var str=UM.getEditor('myEditor').getContent();
	alert(str);
}


function cms_CmsNews_insert(){
	var newsContent=UM.getEditor('myEditor').getContent();
		$.ajax({
			url:'cms_CmsNews_insert',
			data:{
				newsTitle:$("#newsTitle").val(),
				newsSource:$("#newsSource").val(),
				newsType:$("#newsType").val(),
				newsImg:$("#newsImg").val(),
				newsContent:newsContent
	         },
			dataType:'json',
			type:'post',
			success:function(data){
				 
				alert('提交成功');
				 
	 		},
	 		error:function(data){
	 			alert('提交失败');
			}
		});
	
}


$(window).unload(function(){
    //响应事件
    alert("获取到了页面要关闭的事件了！"); 
});

</script>






<%@ include file="/WEB-INF/page/common_import/footer.jsp" %>

</body>
</html>



liuyunshengsir
关注
专栏目录
springmvc + jsp 集成百度富文本ueditor编辑器上传图片
m0_63174529的博客
11-12 195
‘horizontal’, //分隔线 ‘removeformat’, //清除格式 ‘time’, //时间 ‘date’, //日期 ‘unlink’, //取消链接 ‘insertrow’, //前插入行 ‘insertcol’, //前插入列 // ‘mergeright’, //右合并单元格 // ‘mergedown’, //下合并单元格 ‘deleterow’, //删除行 ‘deletecol’, //删除列 // ‘splittorows’, //拆分成行 // ‘splittocol
Mvc富文本编辑器
04-25
MVC3.0的百度富文本编辑器的使用, 获取Html 显示Html
百度富文本编辑器和springMVC整合
10-29
百度富文本编辑器和SprinMVC的整合，此项目用的是Intellij idea的编译软件，tomcat8,jdk8的配置，代码复制过去其他编译软件也一样的原理
springMVC -- 对接UEditor(富文本编辑器)
weixin_30338743的博客
06-10 164
工作中需要用到UEditor编辑文本，在与springMVC进行整合时，出现了一些问题，结果导致，在进行图片上传时出现如下提示： 上网查询了很多相关资料，此处简要记录下，防止以后遇到类似问题。 一种方式是直接修改源码，步骤如下： 1、编写controller 如下（该接口是ueditor前后台交互的统一路径） ： package com.test.dcdp.c...
SpringMVC4.0+maven 整合ueditor1.4
追梦少年
08-10 1750
第一步：去官网下载【完整源码】和【JSP-UTF8】。http://ueditor.baidu.com/website/download.html 第二部：搭建MAVEN+SpringMVC项目 1、下载【完整源码】的 解压，拷贝ueditor1_4_3_3-src.>jsp>src下的com代码拷贝到根目录下 项目展示 2、下载【JSP-U
SpringMVC UEditor
黑火弧的专栏
06-09 408
之前理解的一些误区： 1.所有的富文本功能都有一个插件    因为每个富文本显示的内容不一样，所以不建议使用统一的 js. 2. 写一个共通的controller用来给UEditor调用   这个样子不大好啊，还是各自管各自的吧，编辑器里用路径的地方太多了。 3. config.json 的路径问题：   ConfigManager类中getConfigPath 是获取config.j
在springmvc中使用Ueditor
weixin_34112030的博客
03-01 76
Ueditor下载地址：http://ueditor.baidu.com/website/download.html 下载后直接解压缩。我主要实现文件上传和form表单提交数据。一、配置文件修改uedit.config.js var URL = window.UEDITOR_HOME_URL; //主要是本地ueditor文件目录 serverUrl: URL + "...
springMvc+easyui+ueditor例子
07-21
总的来说，"springMvc+easyui+ueditor例子"展示了如何整合这些技术来创建一个功能全面的Web应用，实现了对富文本内容的管理，对于学习和理解前后端交互、MVC架构以及富文本编辑器的使用具有很好的参考价值。...
UEditor富文本编辑器+内容转word导出整合经验分享(SpringMVC+Ueditor+mybatis+Maven)
01-18
UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。 笔者使用Springmvc+mybatis+maven搭建，并实现插入图片...
spring整合百度富文本ueditor（源码）
04-03
在本文中，我们将深入探讨如何将百度富文本编辑器（UEditor）与Spring、SpringMVC和MyBatis框架进行整合。首先，我们来看一下标题和描述提供的信息，它们指向了一个具体的项目实践，即在Spring4、SpringMVC和MyBatis...
SpringMVC 使用百度Ueditor
我就是我不一样的美男子！
12-08 393
SpringMVC 使用百度Ueditor SpringMVC 使用百度Ueditor
MVC3中如何输出富文本
weixin_30478619的博客
08-10 94
在网站的文本输出中，经常会将DB里的文本输出到页面上。 一般来说是直接利用MVC3中的ViewBag将文本带到前台并表示， 或是是直接以<%:model.data%>的方式将文本表示出来。 但是这两种方式都是以字符串的形式将文本输出出来的， 如果要想实现文本的换行，或者是输出内容富文本化， 比如说实现文本的换行，给特定字符添加颜色，设置粗体， 这两种方式都显得心有余而力不足...
SpringMVC整合UEditor
一个人的博客
09-17 1540
由于项目需要，前端需要在线编辑文档，那么就要提供丰富一点的编辑器。找了半天，前端跟我说只能用Ueditor。这还是个国产的，baidu的。那个API我反正是看不懂。整合了各方博客资料，终于用了两天把这个东西搞出来了。说真的，网上的博客是真的难看懂。 其实搞来搞去，只要照着这个https://www.cnblogs.com/yinz/p/5502405.html，这个博客来就行了。 主要用到的c...
springMVC整合UEditor
宁静致远
03-23 820
最近在公司后台管理模块中做一个新闻管理的界面，由于需要用到富文本编辑器，所以就学习了一下百度的UEditor富文本，并整合到公司的项目中，故在此记录一下。 一、首先进入UEditor的官网http://ueditor.baidu.com/website/，下载UEditor的插件到自己的项目中，这里我下载的是1.4.3.3的jsp版本，大家也可以根据自己项目的需要来选择其他的版本。 接下来
Springmvc整合UEditor
ClinEvol的博客
09-27 452
1.新建web project，并配置好spring mvc环境。 2.下载百度编辑器UEditor,本文以（ueditor1_4_3_3-utf8-jsp）版本为例。 3.在工程WebRoot下创建目录ueditor,并把下载得到的文件全部（jsp目录除外）复制过来。 4.把下载得到jsp目录下config.json复制到ueditor目录下。完成3-4步如下图： 如图： 5.配置后台 创建U...
mvc ueditor html,在springmvc中使用Ueditor
weixin_30025115的博客
06-19 167
Ueditor下载地址：下载后直接解压缩。我主要实现文件上传和form表单提交数据。一、配置文件修改uedit.config.jsvar URL = window.UEDITOR_HOME_URL; //主要是本地ueditor文件目录serverUrl: URL + "jsp/config.jhtml" // 服务器统一请求接口路径conf.json"p_w_picpathUrlPrefix"...
SpringMVC 整合 百度编辑器UEditor
左手121
12-03 4741
1、下载UEditor，这里选择JSP(UTF8)版本和完整源码 。在你的项目中引入JSP(UTF8)版本的文件和完整源码对应的jsp源码。 2、使用maven引入对应的jar包(也可以同过直接引用ueditor自带的包) <!-- ueditor依赖项 --> <dependency> <groupId>commons-fileupload</g
springmvc与Ueditor结合使用
Roninwz的博客
06-07 392
1.F12分析2.配置web.xml以免过滤掉多图上传的html3.配置config.json文件可参考博客：https://blog.csdn.net/l1028386804/article/details/52389722
SpringMVC ModelAndView深度解析：使用与实例
"SpringMVC ModelAndView 是Spring MVC框架中用于处理控制器和视图之间交互的关键类。它主要用于存储处理完成后要返回的数据（Model）以及决定如何显示这些数据的视图（View）。通过ModelAndView，开发者可以方便地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liuyunshengsir

微信：lys20191020

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值