UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议，所有源代码在协议允许范围内可自由修改和使用。百度UEditor的推出，可以帮助不少网站开发者在开发富文本编辑器所遇到的难题，节约开发者因开发富文本编辑器所需要的大量时间，有效降低了企业的开发成本。

做为一个资深的码农，网站里代码高亮是必不可少的，通常分享好几行代码的时候我们都是用到代码高亮插件，但是对于函数或者短代码来说如果也用插件也未免太大材小用了，所以我的思路是行内的代码用<code></code>标签，而多行代码用<pre></pre>标签，pre标签用插件识别高亮，code标签自己定义样式。UEditor集成了pre标签的代码功能，所以code就要我们二次开发来完成了！

最终效果展示：

官方文档介绍：

UEditor从1.4.1开始，添加对于二次开发的扩展支持。无需对 UEditor 代码做任何修改，只需在UEditor之外通过UEditor提供的二次开发接口开发定制功能.这种开发方式不仅避免了修改UEditor源码，方便日后UEditor的升级，而且通过接口，可以将开发的定制功能维护到一个文件中或者一个目录中，方便日后对其维护。更多请查看UEditor官网。

首先我们需要添加一个按钮，在UEditor目录下新建一个addCustomizeButton.js文件

使用文件方式：

<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>

<!--添加按钮-->

<script type="text/javascript" charset="utf-8" src="addCustomizeButton.js"></script>

然后编辑addCustomizeButton.js添加按钮和功能写入以下代码：

UE.registerUI('code', function(editor, uiName) {

//注册按钮执行时的command命令，使用命令默认就会带有回退操作

editor.registerCommand(uiName, {

execCommand: function() {

alert('execCommand:' + uiName)

}

});

//创建一个button

var btn = new UE.ui.Button({

//按钮的名字

name: uiName,

//提示

title: 'code',

//添加额外样式，指定icon图标，这里默认使用一个重复的icon

cssRules: 'background-position: -440px -40px;',

//点击时执行的命令

onclick: function() {

// 获取当前光标选中的文本

var range = UE.getEditor('editor').selection.getRange();

range.select();

var txt = UE.getEditor('editor').selection.getText();

var value;

// 判断如果当前没有选中文本弹出提示框输入文本

if(txt != ''){

value = txt;

}else{

value = prompt('插入html代码', '');

}

if(value != "null" && value != null){

UE.getEditor('editor').execCommand('insertHtml', "&nbsp;<code>"+value+"</code>&nbsp;");

}

}

});

//当点到编辑内容上时，按钮要做的状态反射

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;

});

为了分别出code标签和普通文本的区别我们需要给UEditor编辑器内添加一下样式文件路径ueditor/themes/iframe.css

code{

background: #f5f2f0;

color: #e90;

display: inline-block;

padding: 3px;

font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

text-shadow: 0 1px white;

}

至此效果已全部达成！

原创文章，转载请注明出处！