SSH系列：（23）Ueditor

發(fā)布時(shí)間：2020-06-09 09:58:25 來源：網(wǎng)絡(luò) 閱讀：659 作者：lsieun 欄目：web開發(fā)

1、Ueditor下載

地址：http://ueditor.baidu.com/website/download.html#ueditor

由于我的SSH項(xiàng)目是UTF-8編碼的，所以下載UTF-8版本的UEditor。

SSH系列：（23）Ueditor

2、HelloWorld示例

解壓下載的壓縮包，內(nèi)容如下：

SSH系列：（23）Ueditor

第1個(gè)例子，來源于https://github.com/fex-team/ueditor

在當(dāng)前目錄下，添加一個(gè)demo.html文件，內(nèi)容如下：

<!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>
  <!-- 實(shí)例化編輯器 -->
  <script type="text/javascript">
	var ue = UE.getEditor('container');
  </script>
 </body>
</html>

在瀏覽器打開，顯示效果如下：

SSH系列：（23）Ueditor

從上面的這個(gè)HTML例子中，我們看到主要由4部分組成：配置文件（ueditor.config.js）、編輯器源文件（ueditor.all.js）、容器（id為container部分）和實(shí)例化代碼（UE.getEditor的部分）。

第2個(gè)例子，是參考該文件夾下index.html來完成

在該文件夾下，添加demo2，內(nèi)容如下：

<!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、加載語(yǔ)言-->
  <!--建議手動(dòng)加載語(yǔ)言，避免在ie下有時(shí)因?yàn)榧虞d語(yǔ)言失敗導(dǎo)致編輯器加載失敗-->
  <!--這里加載的語(yǔ)言文件會(huì)覆蓋你在配置項(xiàng)目里添加的語(yǔ)言類型，比如你在配置項(xiàng)目里配置的是英文，這里加載的中文，那最后就是中文-->
  <script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script>
  <script type="text/javascript">
	window.onload = function(){
		//4、實(shí)例化編輯器
		//建議使用工廠方法getEditor創(chuàng)建和引用編輯器實(shí)例
		//如果在某個(gè)閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實(shí)例
		var ue = UE.getEditor('editor');
	}
  </script>
 </head>
 <body>
	<!--0、準(zhǔn)備容器-->
	<div id="editor"></div>
 </body>
</html>

雖然說，在顯示效果上和上一個(gè)例子是一樣的，但是寫上注釋和編號(hào)，會(huì)讓人的思路更清晰一些。

3、在項(xiàng)目中使用Ueditor

3.1、將Ueditor添加到項(xiàng)目的WEBRoot/js/ueditor目錄下

SSH系列：（23）Ueditor

3.2、在addUI.jsp頁(yè)面中，添加js文件，并進(jìn)行實(shí)例化

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="/common/header.jsp"%>
    <title>信息發(fā)布管理</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>信息發(fā)布管理</strong>&nbsp;-&nbsp;新增信息</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">信息標(biāo)題：</td>
            <td colspan="3"><s:textfield name="info.title" cssStyle="width:90%"/></td>
        </tr>
        <tr>
            <td class="tdBg" width="200px">信息內(nèi)容：</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">創(chuàng)建人：</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">創(chuàng)建時(shí)間：</td>
            <td>
             	<s:date name="info.createTime" format="yyyy-MM-dd HH:ss"/>
             	<s:hidden name="info.createTime"/>
            </td>
        </tr>
    </table>
    <!-- 默認(rèn)信息狀態(tài)為 發(fā)布 -->
    <s:hidden name="info.state" value="1"/>
    <div class="tc mt20">
        <input type="submit" class="btnB2" value="保存" />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <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>

知識(shí)點(diǎn)（1）：在上的Javascript代碼中，有一句

window.UEDITOR_HOME_URL = "${basePath}/js/ueditor";

雖然在ueditor.config.js文件中有解釋，但還不是特別懂

    /**
     * 編輯器資源文件根路徑。它所表示的含義是：以編輯器實(shí)例化頁(yè)面為當(dāng)前路徑，指向編輯器資源文件（即dialog等文件夾）的路徑。
     * 鑒于很多同學(xué)在使用編輯器的時(shí)候出現(xiàn)的種種路徑問題，此處強(qiáng)烈建議大家使用"相對(duì)于網(wǎng)站根目錄的相對(duì)路徑"進(jìn)行配置。
     * "相對(duì)于網(wǎng)站根目錄的相對(duì)路徑"也就是以斜杠開頭的形如"/myProject/ueditor/"這樣的路徑。
     * 如果站點(diǎn)中有多個(gè)不在同一層級(jí)的頁(yè)面需要實(shí)例化編輯器，且引用了同一UEditor的時(shí)候，此處的URL可能不適用于每個(gè)頁(yè)面的編輯器。
     * 因此，UEditor提供了針對(duì)不同頁(yè)面的編輯器可單獨(dú)配置的根路徑，具體來說，在需要實(shí)例化編輯器的頁(yè)面最頂部寫上如下代碼即可。當(dāng)然，需要令此處的URL等于對(duì)應(yīng)的配置。
     * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
     */
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

知識(shí)點(diǎn)（2）：同時(shí)，需要回顧一下/common/header.jsp的內(nèi)容

<%@ 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上工具欄圖標(biāo)，例如刪除 “視頻、音樂、附件”功能

SSH系列：（23）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”，可以進(jìn)行如下設(shè)置：

        //elementPathEnabled
        //是否啟用元素路徑，默認(rèn)是顯示
        ,elementPathEnabled : false

3.4、圖片上傳

（1）導(dǎo)入jar包

將WebRoot/js/ueditor/jsp/lib下的5個(gè)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}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */

SSH系列：（23）Ueditor

3.5、Ueditor提示“保存成功”

如下圖

SSH系列：（23）Ueditor

在網(wǎng)上對(duì)“本地保存成功”一般有兩種討論：一種是取消“本地保存成功”的提示，另一種是如何使用它。

（1）如何使用本地保存成功

    		var ue = UE.getEditor("editor");
    		setTimeout(function(){
    			ue.execCommand('drafts');
    		}, 500);//注意一定要延時(shí)，要等ue載入成功。之后，你編輯的內(nèi)容就神奇的保存到了本地。不需要服務(wù)器做任何操作。

問題：如何驗(yàn)證呢？

解答：假如你想要使用ueditor發(fā)布內(nèi)容，正在編輯著，ueditor提示你“本地保存成功”，這個(gè)時(shí)候你跳轉(zhuǎn)到其它頁(yè)面或者關(guān)閉瀏覽器重新打開，再打開新增頁(yè)面，你會(huì)發(fā)現(xiàn)你原來編輯的內(nèi)容還在。（我用Firefox進(jìn)行測(cè)試的）

（2）如何關(guān)閉“本地保存成功”呢？

在ueditor.config.js文件中設(shè)置enableAutoSave參數(shù)為false就可以關(guān)閉本地保存功能。

        //啟用自動(dòng)保存
        ,enableAutoSave: false

但是，ueditor1.4.3版本是沒有效果的，需要修改代碼，在ueditor1.5.0版本已經(jīng)得到修復(fù)。

修改ueditor1.4.3版本的方法是，打開ueditor.all.js文件

在該文件中進(jìn)行搜索：UE.plugin.register('autosave'

// plugins/autosave.js
UE.plugin.register('autosave', function (){

    //代碼省略

    return {
        //代碼省略
        bindEvents:{
            //代碼省略

            'contentchange': function () {
            	//#####新增加的代碼->開始#####
            	if(!me.getOpt('enableAutoSave')){
            		return;
            	}
            	//#####新增加的代碼->結(jié)束#####
            	
                if ( !saveKey ) {
                    return;
                }

                //代碼省略


            }
        },
        commands:{
            //代碼省略
        }
    }

});

以下是新增的代碼：

//新增加的代碼
if(!me.getOpt('enableAutoSave')){
	return;
}

參考地址：

http://my.oschina.net/9981/blog/599808

http://www.yoodb.com/article/display/195

向AI問一下細(xì)節(jié)

SSH系列：（23）Ueditor

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽