需求

現狀描述：目前預覽正文內容只是文字框放大的樣式

優化方向：建議點選預覽可直接預覽門戶介面的樣式

也就是現狀我們呼叫的是Ueditor自帶的預覽功能,而需求中的預覽功能則相當於要我們重寫預覽按鈕

在之前老版本的Ueditor中新增按鈕很麻煩,具體可以參考這裡

二次開發

無需對 UEditor 程式碼做任何修改，只需在UEditor之外通過UEditor提供的二次開發介面開發定製功能.這種開發方式不僅避免了修改UEditor原始碼，方便日後UEditor的升級，而且通過介面，可以將開發的定製功能維護到一個檔案中或者一個目錄中，方便日後對其維護。

1.uiname,是你為新新增的UI起的名字，這裡可以是1個或者多個，“uiname”後者是“uiname1 uiname2 uiname3”
2. function

，是實際你要做的事情，這裡提供兩個引數，editor是編輯器例項，如果你有多個編輯器例項，那每個編輯器例項化後，都會呼叫這個function,並且把editor傳進來,uiname,你為ui起的名字，如果前邊你新增的是多個的化，這裡function會被呼叫多次，並且將每一個ui名字傳遞進來.如果函式返回了一個UI 例項，那這個UI例項就會被預設加到工具欄上。當然也可以不返回任何UI。比如希望監控selectionchange事件，在某些場景下彈出浮層，這時就不需要返回任何UI.
3. index,是你想放到toolbar的那個位置，預設是放到最後
4. editorId,當你的頁面上有多個編輯器例項時，你想將這個ui擴充套件到那個編輯器例項上，這裡的editorId是給你編輯器初始化時，傳入的id,預設是每個例項都會加入你的擴充套件

對於 UEditor 的二次開發，一般多為新增按鈕，下拉筐或者是新增一個dialog。基於這幾種常規的方式，我在_examples目錄下分別書寫了3個型別的定製demo。

1. addCustomizeButton.js 新增一個按鈕
2. addCustomizeCombox.js 新增一個下拉框
3. addCustomizeDialog.js 新增一個彈出層

我們根據我們的需求這裡說一下新增一個按鈕SoEasy~~~ 不得吐槽一下以前是真繁瑣 之前不知道有新方式 用老的弄,在之前的版本中，UEditor對於二次開發的支援不夠優化，經常需要開發者不僅要開發相應的功能，例如command命令,plugin外掛等，還要在UEditor上修改多處檔案，差點沒弄吐血
首先我們定義我們自定義按鈕
新增一個按鈕

UE.registerUI('button', function(editor, uiName) {
    //註冊按鈕執行時的command命令，使用命令預設就會帶有回退操作
    editor.registerCommand(uiName, {
        execCommand: function() {
            alert('execCommand:' + uiName)
        }
    });
    //建立一個button
    var btn = new UE.ui.Button({
        //按鈕的名字
        name: uiName,
        //提示
        title: '預覽',
        //新增額外樣式，指定icon圖示，這裡預設使用一個重複的icon
        cssRules: 'background-position: -422px -20px;',
        //點選時執行的命令
        onclick: function() {
            //這裡可以不用執行命令,做你自己的操作也可
            if($("input[name='title']").val()==''){
                layer.msg('必需輸入標題才能預覽！');
                return;
            }
            NewsNotice.saveUeditor();
        }
    });
    //當點到編輯內容上時，按鈕要做的狀態反射
    editor.addListener('selectionchange', function() {
        var state = editor.queryCommandState(uiName);
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });
    //因為你是新增button,所以需要返回這個button
    return btn;
});

saveUeditor:function(){
        	$("#hiddenContent").val(UE.getEditor('jsNewsNoticeContent').getContent());

        	var rows = $("#jsAttachmentDg").datagrid('getRows');
        	var temp = '';
        	for(var i=0;i<rows.length;i++){
        		temp += rows[i].fileType+","+rows[i].fileName+";";
			}
			$("#hiddenRowsData").val(temp);
			$("#hiddenRowsCount").val(rows.length);
        	window.open(basePath+'/portal/news/newsNoticeDetail.jhtml');
		},

新增多個按鈕

UE.registerUI('bold italic redo undo underline strikethrough', function(editor, uiName) {
    //註冊按鈕執行時的command命令，使用命令預設就會帶有回退操作
    editor.registerCommand(uiName, {
        execCommand: function() {
            alert('execCommand:' + uiName)
        }
    });
    //建立一個button
    var btn = new UE.ui.Button({
        //按鈕的名字
        name: uiName,
        //提示
        title: uiName,
        //新增額外樣式,指定icon圖示,這裡預設使用一個重複的icon
        cssRules: 'background-position: -500px 0;',
        //點選時執行的命令
        onclick: function() {
            //這裡可以不用執行命令,做你自己的操作也可
            editor.execCommand(uiName);
        }
    });
    //當點到編輯內容上時，按鈕要做的狀態反射
    editor.addListener('selectionchange', function() {
        var state = editor.queryCommandState(uiName);
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });
    //因為你是新增button,所以需要返回這個button
    return btn;
});

最後只需要在我們的頁面中引入我們新增按鈕所在的js即可 是不是很easy

<script type="text/javascript" charset="utf-8" src="/assets/js/modules/form/form_preview_notice.js?v=${assets_v}"></script>

哈哈哈嗝 大功告成!!!
最後再說一句 真是用過老方式才知道新的新增按鈕介面有多爽 歐耶