13518219792

NEWS

网站建设资讯

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文件，内容如下：

 
  
  
 
 
  
  Hello World
  
  
  
  
  
  
	var ue = UE.getEditor('container');
  
 

在浏览器打开，显示效果如下：

从上面的这个HTML例子中，我们看到主要由4部分组成：配置文件（ueditor.config.js）、编辑器源文件（ueditor.all.js）、容器（id为container部分）和实例化代码（UE.getEditor的部分）。

第2个例子，是参考该文件夹下index.html来完成

在该文件夹下，添加demo2，内容如下：

 
  
  
  
  
  
  
  
  
  
  
  
	window.onload = function(){
		//4、实例化编辑器
		//建议使用工厂方法getEditor创建和引用编辑器实例
		//如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
		var ue = UE.getEditor('editor');
	}
  
 
 
	
	

 

虽然说，在显示效果上和上一个例子是一样的，但是写上注释和编号，会让人的思路更清晰一些。

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目录下

（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;
}