话不多说，直接开始，下面先简单演示一下几个效果：

锄禾日当午，汗滴禾下土。
谁知盘中餐，粒粒皆辛苦。

我们给其中部分字加上背景色：

锄禾日当午，汗滴禾下土。
谁知盘中餐，粒粒皆辛苦。

默认编辑器默认的背景色非常的low，怎么改呢？

1.先找到文件：statics/js/ckeditor/plugins/colorbutton/plugin.js

2.找到代码：

CKEDITOR.config.colorButton_backStyle = {
	element: 'span',
	styles: { 'background-color': '#(color)'}
};

替换为：

CKEDITOR.config.colorButton_backStyle = {
	element: 'em',
	styles: { 'background-color': '#(color)'  ,'border':'1px solid #(color)' }
};

3.在前台的模版中加入js：

$(function(){ 
	$(".content em").each(function(){
		var rgb = $(this).css('background-color');
		var rgb = rgb.replace(')',' ,.7)') ;
		var rgb = rgb.replace('rgb','rgba') ;
		$(this).css({
			'background': rgb ,
			'padding':'0 2px 0 2px',
			'overflow':'hidden',
			'border-radius': '3px',
			'font-style':  'normal',
		});
	});
});

需要注意的是 $(".content em").each(function() 中的 .content 是内容包裹的class样式名。

修改完成后，发布内容测试效果！