springmvc下富文本UEditor的使用
来源：互联网 发布：淘宝网2016全年交易额 编辑：程序博客网 时间：2024/05/16 19:02
1.下载地址
http://wordonline.bj.bcebos.com/umeditor_release/umeditor1.2.3-utf8-jsp.zip2.将其放在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" onclick="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> 0 2
- springmvc下富文本UEditor的使用
- 使用ueditor富文本
- UEditor富文本使用
- 富文本web编辑器--ueditor的使用
- 百度富文本编辑器Ueditor的使用
- 富文本编辑器Ueditor的使用
- 关于富文本编辑器Ueditor的使用
- ueditor富文本编辑器的使用
- 百度Ueditor富文本编辑器的使用
- UEditor富文本编辑器的使用
- UEditor富文本编辑器的使用
- 富文本编辑器ueditor的使用实践
- 百度富文本ueditor的使用
- UEditor | 百度富文本使用
- 富文本ueditor使用记录
- UEditor富文本编辑器整合SpringMVC
- springMVC -- 整合UEditor(富文本编辑器)
- 百度的UEditor富文本控件的使用
- freemark 全局变量 定义 不生效
- 创建对象的几种方式
- iOS 架构相关
- DDk
- C++ 类模板
- springmvc下富文本UEditor的使用
- 链接不过:undefined symbol
- adobe reader 怎么添加书签
- nested exception is org.apache.ibatis.exceptions.PersistenceException：报错解决。
- hdu
- Linux CentOS6 64位升级3.1内核的方法记录
- Android之进程间通信(IPC)-Messenger
- AWS S3 Not Allowed (Service: Amazon S3; Status Code: 405; Error Code: 405 Not Allowed; Request ID: n
- Android自定义组合控件
