老框架--Uditor 插件編寫

版本: 1.4

過程

• 仔細閱讀github倉庫readme,起手一個demo
• 閱讀開發文檔 ,基本插件開發如下：

 <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
    <!--建議手動加在語言，避免在ie下有時因爲加載語言失敗導致編輯器加載失敗-->
    <!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，比如你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="quote.js"> </script>

新建js

UE.registerUI('quote', function (editor, uiName) {
    var btn = new UE.ui.Button({
        //按鈕的名字
        name: uiName,
        //提示
        title: uiName,
        //需要添加的額外樣式，指定icon圖標，這裏默認使用一個重複的icon
        cssRules: 'background-position: -500px 0;',
        //點擊時執行的命令
        onclick: function () {
            //這裏可以不用執行命令,做你自己的操作也可
            editor.execCommand('inserthtml', '<span>哈哈哈哈哈哈</span>')
        }
    });

    //因爲你是添加button,所以需要返回這個button
    return btn;
})

• 開發API等查看文檔

• 查看插件市場,閱讀其他作者的插件源碼

  • 表單生成器插件

記錄

生成彈窗

var dialog = new UE.ui.Dialog({
    iframeUrl: editor.options.UEDITOR_HOME_URL + 'dialogs/popup.html', // url
    name: 'popup',
    editor: editor,
    title: '寫入批註', // iframe title
    cssRules: "width:600px;height:260px;", // iframe 寬高
    buttons: [
        {
            className: 'edui-okbutton',
            label: '確定',
            onclick: function () {
                dialog.close(true);
                editor.execCommand('html');
            }
        },
        {
            className: 'edui-cancelbutton',
            label: '取消',
            onclick: function () {
                dialog.close(false);
            }
        }]
})
dialog.render(); // 渲染
dialog.open(); // 打開

彈出

var popup = new baidu.editor.ui.Popup({
    editor: this,
    content: '',
    className: 'edui-bubble',
    _edittext: function () {
        baidu.editor.plugins[thePlugins].editdom = popup.anchorEl;
        me.execCommand(thePlugins);
        this.hide();
    },
    _delete: function () {
        if (window.confirm('確認刪除該控件嗎？')) {
            baidu.editor.dom.domUtils.remove(this.anchorEl, false);
        }
        this.hide();
    }
})

popup.render();

$$含義

<nobr>文本框: <span onclick=$$._edittext() class="edui-clickable">編輯</span>&nbsp;&nbsp;<

中的$$含義?

全局查找得知:

baidu.$$ = window[baidu.guid] = window[baidu.guid] || {global:{}};

註冊插件形式開發

之前registerUI註冊UI開發, 爲了實現更復雜的效果，使用plugins註冊

UE.plugins['quote'] = function() {
    var me = this,thePlugins = 'quote';
    me.commands[thePlugins] = {
        execCommand: function () {
            
        }
    }
} 

生成彈窗後的值如何獲取判斷？

在彈窗所屬的html中，已經全局暴露了一個dialog對象，就是之前new的new UE.ui.Dialog.dialog有一些鉤子和方法:

var oNode = null, thePlugins = 'quote';

window.onload = function () {
    if (UE.plugins[thePlugins].editdom) {
        oNode = UE.plugins[thePlugins].editdom;
        var gValue = oNode.getAttribute('value').replace(/"/g, "\"");
        gValue = gValue == null ? '' : gValue;
        $G('orgvalue').value = gValue;
    }
}

dialog.oncancel = function () {
    if (UE.plugins[thePlugins].editdom) {
        delete UE.plugins[thePlugins].editdom;
    }
}

dialog.onok = function () {
    if($G('orgvalue').value.trim() == '') {
        alert('請輸入批註內容')
        return false;
    }

    var gValue=$G('orgvalue').value.replace(/\"/g,""");
}

需要引入百度的工具文件

  <script type="text/javascript" src="../dialogs/internal.js"></script>

類似$G都是工具文件裏定義的封裝函數

解除html規則過濾

div會被解析成p標籤，順帶style script也被屏蔽了。

• ueditor.all.js搜索 allowDivTransToP設置爲false
• addInputRule方法中的style script的case註釋掉

直接更改了ueditor.all.js中的源碼，相當不友好，只是目前沒找到其他搞法

替換選中的字符串

UE.editor上並沒有修改選中字符串的方法。

• range.deleteContents(); 刪除選區的內容
• range.insertNode(); 新增node節點 可以是TextNode ElementNode fragment

var range = UE.getEditor('editor').selection.getRange();
range.select();
var node = document.createTextNode('你說你想要逃');
ue.selection.getRange().deleteContents().insertNode(node)