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文件，内容如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <!-- 加载编辑器的容器 --> <script id="container" name="content" type="text/plain">Hello World</script> <!-- 配置文件 --> <script type="text/javascript" src="ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="ueditor.all.js"></script> <!-- 实例化编辑器 --> <script type="text/javascript"> var ue = UE.getEditor(‘container‘); </script> </body> </html>
在浏览器打开，显示效果如下：
从上面的这个HTML例子中，我们看到主要由4部分组成：配置文件（ueditor.config.js）、编辑器源文件（ueditor.all.js）、容器（id为container部分）和实例化代码（UE.getEditor的部分）。
第2个例子，是参考该文件夹下index.html来完成
在该文件夹下，添加demo2，内容如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
<!--1、加载配置文件-->
<script type="text/javascript" src="ueditor.config.js"></script>
<!--2、加载编辑器源文件-->
<script type="text/javascript" src="ueditor.all.min.js"></script>
<!--3、加载语言-->
<!--建议手动加载语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
window.onload = function(){
//4、实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例
//如果在某个闭包下引用该编辑器，直接调用UE.getEditor(‘editor‘)就能拿到相关的实例
var ue = UE.getEditor(‘editor‘);
}
</script>
</head>
<body>
<!--0、准备容器-->
<div id="editor"></div>
</body>
</html>
虽然说，在显示效果上和上一个例子是一样的，但是写上注释和编号，会让人的思路更清晰一些。
3、在项目中使用Ueditor
3.1、将Ueditor添加到项目的WEBRoot/js/ueditor目录下
3.2、在addUI.jsp页面中，添加js文件，并进行实例化
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<%@include file="/common/header.jsp"%>
<title>信息发布管理</title>
<script type="text/javascript" src="${basePath}/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="${basePath}/js/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="${basePath}/js/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
window.UEDITOR_HOME_URL = "${basePath}/js/ueditor";
window.onload = function(){
var ue = UE.getEditor("editor");
}
</script>
</head>
<body class="rightBody">
<form id="form" name="form" action="${basePath}/tax/info_add.action" method="post" enctype="multipart/form-data">
<div class="p_d_1">
<div class="p_d_1_1">
<div class="content_info">
<div class="c_crumbs"><div><b></b><strong>信息发布管理</strong> - 新增信息</div></div>
<div class="tableH2">新增信息</div>
<table id="baseInfo" width="100%" align="center" class="list" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td class="tdBg" width="200px">信息分类：</td>
<td><s:select name="info.type" list="#infoTypeMap"/></td>
<td class="tdBg" width="200px">来源：</td>
<td><s:textfield name="info.source"/></td>
</tr>
<tr>
<td class="tdBg" width="200px">信息标题：</td>
<td colspan="3"><s:textfield name="info.title" cssStyle="width:90%"/></td>
</tr>
<tr>
<td class="tdBg" width="200px">信息内容：</td>
<td colspan="3"><s:textarea id="editor" name="info.content" cssStyle="width:90%;height:160px;" /></td>
</tr>
<tr>
<td class="tdBg" width="200px">备注：</td>
<td colspan="3"><s:textarea name="info.memo" cols="90" rows="3"/></td>
</tr>
<tr>
<td class="tdBg" width="200px">创建人：</td>
<td>
<s:property value="#session.SYS_USER.name"/>
<s:hidden name="info.creator" value="%{#session.SYS_USER.name}"/>
</td>
<td class="tdBg" width="200px">创建时间：</td>
<td>
<s:date name="info.createTime" format="yyyy-MM-dd HH:ss"/>
<s:hidden name="info.createTime"/>
</td>
</tr>
</table>
<!-- 默认信息状态为 发布 -->
<s:hidden name="info.state" value="1"/>
<div class="tc mt20">
<input type="submit" class="btnB2" value="保存" />
<input type="button" onclick="javascript:history.go(-1)" class="btnB2" value="返回" />
</div>
</div></div></div>
</form>
</body>
</html>
其中，我们添加的部分是
<script type="text/javascript" src="${basePath}/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="${basePath}/js/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="${basePath}/js/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
window.UEDITOR_HOME_URL = "${basePath}/js/ueditor";
window.onload = function(){
var ue = 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/"; */ var URL = window.UEDITOR_HOME_URL || getUEBasePath();
知识点（2）：同时，需要回顾一下/common/header.jsp的内容
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<%
pageContext.setAttribute("basePath", request.getContextPath());
%>
<script type="text/javascript" src="${basePath}/js/jquery/jquery-1.12.3.js"></script>
<link href="${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‘, ‘|‘, ‘imagenone‘, ‘imageleft‘, ‘imageright‘, ‘imagecenter‘, ‘|‘, ‘simpleupload‘, ‘insertimage‘, ‘emotion‘, ‘scrawl‘, ‘insertvideo‘, ‘music‘, ‘attachment‘, ‘map‘, ‘gmap‘, ‘insertframe‘, ‘insertcode‘, ‘webapp‘, ‘pagebreak‘, ‘template‘, ‘background‘, ‘|‘, ‘horizontal‘, ‘date‘, ‘time‘, ‘spechars‘, ‘snapscreen‘, ‘wordimage‘, ‘|‘, ‘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配置
"imageUrlPrefix": "http://127.0.0.1:8080/oa", /* 图片访问路径前缀 */
"imagePathFormat": "/upload/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
3.5、Ueditor提示“保存成功”
如下图
在网上对“本地保存成功”一般有两种讨论：一种是取消“本地保存成功”的提示，另一种是如何使用它。
（1）如何使用本地保存成功
var ue = 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.js
UE.plugin.register(‘autosave‘, function (){
//代码省略
return {
//代码省略
bindEvents:{
//代码省略
‘contentchange‘: function () {
//#####新增加的代码->开始#####
if(!me.getOpt(‘enableAutoSave‘)){
return;
}
//#####新增加的代码->结束#####
if ( !saveKey ) {
return;
}
//代码省略
}
},
commands:{
//代码省略
}
}
});
以下是新增的代码：
//新增加的代码
if(!me.getOpt(‘enableAutoSave‘)){
return;
}
|
参考地址： |
时间： 2024-10-25 05:27:20