百度編輯器umeditor-jsp版部署

時間 2019-11-12

原文原文鏈接

一、依賴的架包javascript

二、頁面設置css

<script language="JavaScript">
<!--設置編輯器路徑-->
window["UMEDITOR_HOME_URL"]="${request.contextPath}/resources/umeditor/";
</script>
<link href="${request.contextPath}/resources/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="${request.contextPath}/resources/umeditor/third-party/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="baidu/umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${request.contextPath}/resources/umeditor/umeditor.min.js"> </script>
<!--建議手動加在語言，避免在ie下有時由於加載語言失敗致使編輯器加載失敗-->
<!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，好比你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
<script type="text/javascript" charset="utf-8" src="${request.contextPath}/resources/umeditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
	//控制字體大小
    $(function(){
        //實例化編輯器
        var myEditor = UM.getEditor('myEditor');
        //設置字體樣式
        var font={"fontSize":"16px" ,"fontFamily":"微軟雅黑, 'Microsoft YaHei'","fontWeight":"normal","color":"black"};
        $("#myEditor").css(font);
        //監聽內容是否改變
        myEditor.addListener('contentChange',function(){
            if($("#myEditor").find("p").size()>0){
                $("#myEditor").find("p").css(font);
            }
            if($("#myEditor").find("span").size()>0){
                $("#myEditor").find("span").css(font);
            }
        });
    })
</script>
</head>
<body scroll="auto"><#-- form用auto,list用no -->
<form name="zxJcForm" action="" method="post" >
	<div id="mainDiv">
			<div id="topDiv">
			</div>
			<div id="centerDiv">
				<div id="body">
					<!--style給定寬度能夠影響編輯器的最終寬度-->
					<script type="text/plain" id="myEditor" ></script>
				</div>
				<div class="notes">
					說明：
				</div>
			</div>
	</div>
</form>
</body>
</html>

三、JSP控制器修改html

    <%@ page language="java" contentType="text/html; charset=utf-8"
             pageEncoding="utf-8"%>
        <%@ page import="com.baidu.ueditor.um.Uploader" %>

            <%
    request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
    Uploader up = new Uploader(request);
    //設置圖片存放路徑
    up.setSavePath("../../umeditorUpload");
    //上傳圖片的格式
    String[] fileType = {".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp"};
    up.setAllowFiles(fileType);
    //圖片大小設置
    up.setMaxSize(10000); //單位KB
    up.upload();

    String callback = request.getParameter("callback");

    String result = "{\"name\":\""+ up.getFileName() +"\", \"originalName\": \""+ up.getOriginalName() +"\", \"size\": "+ up.getSize() +", \"state\": \""+ up.getState() +"\", \"type\": \""+ up.getType() +"\", \"url\": \""+ up.getUrl() +"\"}";

    result = result.replaceAll( "\\\\", "\\\\" );

    if( callback == null ){
        response.getWriter().print( result );
    }else{
        response.getWriter().print("<script>"+ callback +"(" + result + ")</script>");
    }
    %>

四、umeditor.config配置修改java

/**
 *  umeditor完整配置項
 *  能夠在這裏配置整個編輯器的特性
 */
/**************************提示********************************
 * 全部被註釋的配置項均爲UEditor默認值。
 * 修改默認配置請首先確保已經徹底明確該參數的真實用途。
 * 主要有兩種修改方案，一種是取消此處註釋，而後修改爲對應參數；另外一種是在實例化編輯器時傳入對應參數。
 * 當升級編輯器時，可直接使用舊版配置文件替換新版配置文件,不用擔憂舊版配置文件中因缺乏新功能所需的參數而致使腳本報錯。
 **************************提示********************************/


(function () {
    /**
     * 編輯器資源文件根路徑。它所表示的含義是：以編輯器實例化頁面爲當前路徑，指向編輯器資源文件（即dialog等文件夾）的路徑。
     * 鑑於不少同窗在使用編輯器的時候出現的種種路徑問題，此處強烈建議你們使用"相對於網站根目錄的相對路徑"進行配置。
     * "相對於網站根目錄的相對路徑"也就是以斜槓開頭的形如"/myProject/umeditor/"這樣的路徑。
     * 若是站點中有多個不在同一層級的頁面須要實例化編輯器，且引用了同一UEditor的時候，此處的URL可能不適用於每一個頁面的編輯器。
     * 所以，UEditor提供了針對不一樣頁面的編輯器可單獨配置的根路徑，具體來講，在須要實例化編輯器的頁面最頂部寫上以下代碼便可。固然，須要令此處的URL等於對應的配置。
     * window.UMEDITOR_HOME_URL = "/xxxx/xxxx/";
     */
    var URL = window.UMEDITOR_HOME_URL || (function(){

        function PathStack() {

            this.documentURL = self.document.URL || self.location.href;

            this.separator = '/';
            this.separatorPattern = /\\|\//g;
            this.currentDir = './';
            this.currentDirPattern = /^[.]\/]/;

            this.path = this.documentURL;
            this.stack = [];

            this.push( this.documentURL );

        }

        PathStack.isParentPath = function( path ){
            return path === '..';
        };

        PathStack.hasProtocol = function( path ){
            return !!PathStack.getProtocol( path );
        };

        PathStack.getProtocol = function( path ){

            var protocol = /^[^:]*:\/*/.exec( path );

            return protocol ? protocol[0] : null;

        };

        PathStack.prototype = {
            push: function( path ){

                this.path = path;

                update.call( this );
                parse.call( this );

                return this;

            },
            getPath: function(){
                return this + "";
            },
            toString: function(){
                return this.protocol + ( this.stack.concat( [''] ) ).join( this.separator );
            }
        };

        function update() {

            var protocol = PathStack.getProtocol( this.path || '' );

            if( protocol ) {

                //根協議
                this.protocol = protocol;

                //local
                this.localSeparator = /\\|\//.exec( this.path.replace( protocol, '' ) )[0];

                this.stack = [];
            } else {
                protocol = /\\|\//.exec( this.path );
                protocol && (this.localSeparator = protocol[0]);
            }

        }

        function parse(){

            var parsedStack = this.path.replace( this.currentDirPattern, '' );

            if( PathStack.hasProtocol( this.path ) ) {
                parsedStack = parsedStack.replace( this.protocol , '');
            }

            parsedStack = parsedStack.split( this.localSeparator );
            parsedStack.length = parsedStack.length - 1;

            for(var i= 0,tempPath,l=parsedStack.length,root = this.stack;i<l;i++){
                tempPath = parsedStack[i];
                if(tempPath){
                    if( PathStack.isParentPath( tempPath ) ) {
                        root.pop();
                    } else {
                        root.push( tempPath );
                    }
                }

            }


        }

        var currentPath = document.getElementsByTagName('script');

        currentPath = currentPath[ currentPath.length -1 ].src;

        return new PathStack().push( currentPath ) + "";


    })();

    /**
     * 配置項主體。注意，此處全部涉及到路徑的配置別遺漏URL變量。
     */
    window.UMEDITOR_CONFIG = {

        //爲編輯器實例添加一個路徑，這個不能被註釋
        UMEDITOR_HOME_URL : URL

        //圖片上傳配置區
        ,imageUrl:URL.substring(0,URL.indexOf("resources"))+"baidu/umeditor/imageUp.jsp"             //圖片上傳提交地址
        ,imagePath:URL                     //圖片修正地址，引用了fixedImagePath,若有特殊需求，可自行配置
        ,imageFieldName:"umeditorUpload"                   //圖片數據的key,若此處修改，須要在後臺對應文件修改對應參數


        //工具欄上的全部的功能按鈕和下拉框，能夠在new編輯器的實例時選擇本身須要的重新定義
        ,toolbar:[
            'image',
        ]

        //語言配置項,默認是zh-cn。有須要的話也可使用以下這樣的方式來自動多語言切換，固然，前提條件是lang文件夾下存在對應的語言文件：
        //lang值也能夠經過自動獲取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
        //,lang:"zh-cn"
        //,langPath:URL +"lang/"

        //ie下的連接自動監測
        //,autourldetectinie:false

        //主題配置項,默認是default。有須要的話也可使用以下這樣的方式來自動多主題切換，固然，前提條件是themes文件夾下存在對應的主題文件：
        //現有以下皮膚:default
        //,theme:'default'
        //,themePath:URL +"themes/"



        //針對getAllHtml方法，會在對應的head標籤中增長該編碼設置。
        //,charset:"utf-8"

        //經常使用配置項目
        //,isShow : true    //默認顯示編輯器

        //,initialContent:'歡迎使用UMEDITOR!'    //初始化編輯器的內容,也能夠經過textarea/script給值，看官網例子

        //,initialFrameWidth:500 //初始化編輯器寬度,默認500
        //,initialFrameHeight:500  //初始化編輯器高度,默認500

        //,autoClearinitialContent:true //是否自動清除編輯器初始內容，注意：若是focus屬性設置爲true,這個也爲真，那麼編輯器一上來就會觸發致使初始化的內容看不到了

        //,textarea:'editorValue' // 提交表單時，服務器獲取編輯器提交內容的所用的參數，多實例時能夠給容器name屬性，會將name給定的值最爲每一個實例的鍵值，不用每次實例化的時候都設置這個值

        //,focus:false //初始化時，是否讓編輯器得到焦點true或false

        //,autoClearEmptyNode : true //getContent時，是否刪除空的inlineElement節點（包括嵌套的狀況）

        //,fullscreen : false //是否開啓初始化時即全屏，默認關閉

        //,readonly : false //編輯器初始化結束後,編輯區域是不是隻讀的，默認是false

        //,zIndex : 900     //編輯器層級的基數,默認是900

        //若是自定義，最好給p標籤以下的行高，要不輸入中文時，會有跳動感
        //注意這裏添加的樣式，最好放在.edui-editor-body .edui-body-container這兩個的下邊，防止跟頁面上css衝突
        //,initialStyle:'.edui-editor-body .edui-body-container p{line-height:1em}'

        //,autoSyncData:true //自動同步編輯器要提交的數據

        //,emotionLocalization:false //是否開啓表情本地化，默認關閉。若要開啓請確保emotion文件夾下包含官網提供的images表情文件夾

        //,allHtmlEnabled:false //提交到後臺的數據是否包含整個html字符串

        //fontfamily
        //字體設置
//        ,'fontfamily':[
//              { name: 'songti', val: '宋體,SimSun'},
//          ]

        //fontsize
        //字號
        //,'fontsize':[10, 11, 12, 14, 16, 18, 20, 24, 36]

        //paragraph
        //段落格式 值留空時支持多語言自動識別，若配置，則以配置值爲準
        //,'paragraph':{'p':'', 'h1':'', 'h2':'', 'h3':'', 'h4':'', 'h5':'', 'h6':''}

        //undo
        //能夠最多回退的次數,默認20
        //,maxUndoCount:20
        //當輸入的字符數超過該值時，保存一次現場
        //,maxInputCount:1

        //imageScaleEnabled
        // 是否容許點擊文件拖拽改變大小,默認true
        //,imageScaleEnabled:true

        //dropFileEnabled
        // 是否容許拖放圖片到編輯區域，上傳並插入,默認true
        //,dropFileEnabled:true

        //pasteImageEnabled
        // 是否容許粘貼QQ截屏，上傳並插入,默認true
        //,pasteImageEnabled:true

        //autoHeightEnabled
        // 是否自動長高,默認true
        //,autoHeightEnabled:true

        //autoFloatEnabled
        //是否保持toolbar的位置不動,默認true
        //,autoFloatEnabled:true

        //浮動時工具欄距離瀏覽器頂部的高度，用於某些具備固定頭部的頁面
        //,topOffset:30

        //填寫過濾規則
        //,filterRules: {}
    };
})();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。