ueditor工具欄新增按鈕教程

我作了一我的博客網站想要一段文字高亮顯示，大概是這樣：

可是ueditor上面的代碼語言是一大塊的<pre></pre>標籤，以爲不合適，就在網上搜索相關文章，本身結合着實現了一下。

 

第一步：打開ueditor.config.js 搜索 "toolbars",在最後一行添加一個字段，以下所示：

 

 第二步：打開zh-cn.js 語言包，搜索"labelMap"字段，在最後添加相同的字段，以下所示：

這一步是添加提示信息。

再打開ueditor.all.js  搜索"btnCmds" ,在數組的最後添加"formatcode", 以下所示：

 

作到這裏就能夠看到效果了，刷新一下頁面。以下：

圖標是默認的效果，咱們能夠用本身的圖標替換掉，打開ueditor.css文件在最後一行添加代碼：

.edui-default .edui-toolbar .edui-for-formatcode .edui-icon {
    background-image: url("../images/code.png");
}

效果以下：

 

第三步：修改源碼，新增點擊按鈕實現功能，打開ueditor.all.js ,搜索"cleardoc" ,在後面添加一個方法：以下所示：

 

 輸入以下代碼：

//添加code格式化文本
UE.commands['formatcode'] = {
    execCommand: function(cmdName){
        var me = this,
            range = me.selection.getRange(),
            fragment = range.cloneContents(),
            node = document.createElement("p");
            node.appendChild(fragment); 
            //獲取選中的文本，給他添加<code></code>代碼
            me.execCommand('insertHtml', '<code style="color:rgb(192, 0, 0); background-color: rgb(242, 220, 219); padding:1px 4px; border-radius:1px;">'+ node.innerHTML +'</code>'); 
            //釋放掉
            node = '';
    }
};

 

刷新頁面，看一下效果。

完成,(>_<)

博主親測可用.