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文件,内容如下:
ueditor demo
在浏览器打开,显示效果如下:
从上面的这个HTML例子中,我们看到主要由4部分组成:配置文件(ueditor.config.js)、编辑器源文件(ueditor.all.js)、容器(id为container部分)和实例化代码(UE.getEditor的部分)。
第2个例子,是参考该文件夹下index.html来完成
在该文件夹下,添加demo2,内容如下:
ueditor demo
虽然说,在显示效果上和上一个例子是一样的,但是写上注释和编号,会让人的思路更清晰一些。
3、在项目中使用Ueditor
3.1、将Ueditor添加到项目的WEBRoot/js/ueditor目录下
3.2、在addUI.jsp页面中,添加js文件,并进行实例化
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@include file="/common/header.jsp"%>信息发布管理
其中,我们添加的部分是
知识点(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()); %>
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)如何使用本地保存成功
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; }
参考地址: http://my.oschina.net/9981/blog/599808 http://www.yoodb.com/article/display/195 |
网站题目:SSH系列:(23)Ueditor
当前路径:http://scgulin.cn/article/pioodj.html