SSH系列：（23）Ueditor
1、Ueditor下载
地址：http://ueditor.baidu.com/website/download.html#ueditor
由于我的SSH项目是UTF-8编码的，所以下载UTF-8版本的UEditor。
2、HelloWorld示例
解压下载的压缩包，内容如下：
第1个例子，来源于https://github.com/fex-team/ueditor
在当前目录下，添加一个demo.html文件，内容如下：
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>ueditordemo</title></head><body><!--加载编辑器的容器--><scriptid="container"name="content"type="text/plain">HelloWorld</script><!--配置文件--><scripttype="text/javascript"src="ueditor.config.js"></script><!--编辑器源码文件--><scripttype="text/javascript"src="ueditor.all.js"></script><!--实例化编辑器--><scripttype="text/javascript">varue=UE.getEditor('container');</script></body></html>
在浏览器打开，显示效果如下：
从上面的这个HTML例子中，我们看到主要由4部分组成：配置文件（ueditor.config.js）、编辑器源文件（ueditor.all.js）、容器（id为container部分）和实例化代码（UE.getEditor的部分）。
第2个例子，是参考该文件夹下index.html来完成
在该文件夹下，添加demo2，内容如下：
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>ueditordemo</title><!--1、加载配置文件--><scripttype="text/javascript"src="ueditor.config.js"></script><!--2、加载编辑器源文件--><scripttype="text/javascript"src="ueditor.all.min.js"></script><!--3、加载语言--><!--建议手动加载语言，避免在ie下有时因为加载语言失败导致编辑器加载失败--><!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--><scripttype="text/javascript"src="lang/zh-cn/zh-cn.js"></script><scripttype="text/javascript">window.onload=function(){//4、实例化编辑器//建议使用工厂方法getEditor创建和引用编辑器实例//如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例varue=UE.getEditor('editor');}</script></head><body><!--0、准备容器--><divid="editor"></div></body></html>
虽然说，在显示效果上和上一个例子是一样的，但是写上注释和编号，会让人的思路更清晰一些。
3、在项目中使用Ueditor
3.1、将Ueditor添加到项目的WEBRoot/js/ueditor目录下
3.2、在addUI.jsp页面中，添加js文件，并进行实例化
<%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><%@includefile="/common/header.jsp"%><title>信息发布管理</title><scripttype="text/javascript"src="${basePath}/js/ueditor/ueditor.config.js"></script><scripttype="text/javascript"src="${basePath}/js/ueditor/ueditor.all.js"></script><scripttype="text/javascript"src="${basePath}/js/ueditor/lang/zh-cn/zh-cn.js"></script><script>window.UEDITOR_HOME_URL="${basePath}/js/ueditor";window.onload=function(){varue=UE.getEditor("editor");}</script></head><bodyclass="rightBody"><formid="form"name="form"action="${basePath}/tax/info_add.action"method="post"enctype="multipart/form-data"><divclass="p_d_1"><divclass="p_d_1_1"><divclass="content_info"><divclass="c_crumbs"><div><b></b><strong>信息发布管理</strong> - 新增信息</div></div><divclass="tableH2">新增信息</div><tableid="baseInfo"width="100%"align="center"class="list"border="0"cellpadding="0"cellspacing="0"><tr><tdclass="tdBg"width="200px">信息分类：</td><td><s:selectname="info.type"list="#infoTypeMap"/></td><tdclass="tdBg"width="200px">来源：</td><td><s:textfieldname="info.source"/></td></tr><tr><tdclass="tdBg"width="200px">信息标题：</td><tdcolspan="3"><s:textfieldname="info.title"cssStyle="width:90%"/></td></tr><tr><tdclass="tdBg"width="200px">信息内容：</td><tdcolspan="3"><s:textareaid="editor"name="info.content"cssStyle="width:90%;height:160px;"/></td></tr><tr><tdclass="tdBg"width="200px">备注：</td><tdcolspan="3"><s:textareaname="info.memo"cols="90"rows="3"/></td></tr><tr><tdclass="tdBg"width="200px">创建人：</td><td><s:propertyvalue="#session.SYS_USER.name"/><s:hiddenname="info.creator"value="%{#session.SYS_USER.name}"/></td><tdclass="tdBg"width="200px">创建时间：</td><td><s:datename="info.createTime"format="yyyy-MM-ddHH:ss"/><s:hiddenname="info.createTime"/></td></tr></table><!--默认信息状态为发布--><s:hiddenname="info.state"value="1"/><divclass="tcmt20"><inputtype="submit"class="btnB2"value="保存"/> <inputtype="button"onclick="javascript:history.go(-1)"class="btnB2"value="返回"/></div></div></div></div></form></body></html>
其中，我们添加的部分是
<scripttype="text/javascript"src="${basePath}/js/ueditor/ueditor.config.js"></script><scripttype="text/javascript"src="${basePath}/js/ueditor/ueditor.all.js"></script><scripttype="text/javascript"src="${basePath}/js/ueditor/lang/zh-cn/zh-cn.js"></script><script>window.UEDITOR_HOME_URL="${basePath}/js/ueditor";window.onload=function(){varue=UE.getEditor("editor");}</script>
知识点（1）：在上的Javascript代码中，有一句
window.UEDITOR_HOME_URL="${basePath}/js/ueditor";
虽然在ueditor.config.js文件中有解释，但还不是特别懂
/***编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。*鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。*"相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。*如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，此处的URL可能不适用于每个页面的编辑器。*因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。*window.UEDITOR_HOME_URL="/xxxx/xxxx/";*/varURL=window.UEDITOR_HOME_URL||getUEBasePath();
知识点（2）：同时，需要回顾一下/common/header.jsp的内容
<%@pagelanguage="java"pageEncoding="UTF-8"%><%@tagliburi="/struts-tags"prefix="s"%><%pageContext.setAttribute("basePath",request.getContextPath());%><scripttype="text/javascript"src="${basePath}/js/jquery/jquery-1.12.3.js"></script><linkhref="${basePath}/css/skin1.css"rel="stylesheet"type="text/css"/>
3.3、自定义工具栏
如果想修改Ueditor上工具栏图标，例如删除 “视频、音乐、附件”功能
可以修改ueditor.config.js文件中的toolbar部分
toolbars:[['fullscreen','source','|','undo','redo','|','bold','italic','underline','fontborder','strikethrough','superscript','subscript','removeformat','formatmatch','autotypeset','blockquote','pasteplain','|','forecolor','backcolor','insertorderedlist','insertunorderedlist','selectall','cleardoc','|','rowspacingtop','rowspacingbottom','lineheight','|','customstyle','paragraph','fontfamily','fontsize','|','directionalityltr','directionalityrtl','indent','|','justifyleft','justifycenter','justifyright','justifyjustify','|','touppercase','tolowercase','|','link','unlink','anchor','|','p_w_picpathnone','p_w_picpathleft','p_w_picpathright','p_w_picpathcenter','|','simpleupload','insertp_w_picpath','emotion','scrawl','insertvideo','music','p_w_upload','map','gmap','insertframe','insertcode','webapp','pagebreak','template','background','|','horizontal','date','time','spechars','snapscreen','wordp_w_picpath','|','inserttable','deletetable','insertparagraphbeforetable','insertrow','deleterow','insertcol','deletecol','mergecells','mergeright','mergedown','splittocells','splittorows','splittocols','charts','|','print','preview','searchreplace','drafts','help']]
如果想去掉“元素路径:body>p>br”，可以进行如下设置：
//elementPathEnabled//是否启用元素路径，默认是显示,elementPathEnabled:false
3.4、图片上传
（1）导入jar包
将WebRoot/js/ueditor/jsp/lib下的5个jar包拷贝到WEB-INF/lib目录下
commons-codec-1.9.jar
commons-fileupload-1.3.1.jar
commons-io-2.4.jar
json.jar
ueditor-1.1.2.jar
（2）修改WebRoot/js/ueditor/jsp/config.json配置
"p_w_picpathUrlPrefix":"http://127.0.0.1:8080/oa",/*图片访问路径前缀*/"p_w_picpathPathFormat":"/upload/ueditor/p_w_picpath/{yyyy}{mm}{dd}/{time}{rand:6}",/*上传保存路径,可以自定义保存路径和文件名格式*/
3.5、Ueditor提示“保存成功”
如下图
在网上对“本地保存成功”一般有两种讨论：一种是取消“本地保存成功”的提示，另一种是如何使用它。
（1）如何使用本地保存成功
varue=UE.getEditor("editor");setTimeout(function(){ue.execCommand('drafts');},500);//注意一定要延时，要等ue载入成功。之后，你编辑的内容就神奇的保存到了本地。不需要服务器做任何操作。
问题：如何验证呢？
解答：假如你想要使用ueditor发布内容，正在编辑着，ueditor提示你“本地保存成功”，这个时候你跳转到其它页面或者关闭浏览器重新打开，再打开新增页面，你会发现你原来编辑的内容还在。（我用Firefox进行测试的）
（2）如何关闭“本地保存成功”呢？
在ueditor.config.js文件中设置enableAutoSave参数为false就可以关闭本地保存功能。
//启用自动保存,enableAutoSave:false
但是，ueditor1.4.3版本是没有效果的，需要修改代码，在ueditor1.5.0版本已经得到修复。
修改ueditor1.4.3版本的方法是，打开ueditor.all.js文件
在该文件中进行搜索：UE.plugin.register('autosave'
//plugins/autosave.jsUE.plugin.register('autosave',function(){//代码省略return{//代码省略bindEvents:{//代码省略'contentchange':function(){//#####新增加的代码->开始#####if(!me.getOpt('enableAutoSave')){return;}//#####新增加的代码->结束#####if(!saveKey){return;}//代码省略}},commands:{//代码省略}}});
以下是新增的代码：
//新增加的代码if(!me.getOpt('enableAutoSave')){return;}
参考地址：
http://my.oschina.net/9981/blog/599808
http://www.yoodb.com/article/display/195
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
