您现在的位置是：首页 > cms教程 > 帝国CMS教程帝国CMS教程

帝国cms自带ckeditor编辑器代码高亮的方法codesnippet风格

张津广2023-06-11帝国CMS教程已有人查阅

导读无意中看到别人家的博客代码高亮非常漂亮，如下图所示，Mac OS风格，查阅资料为Pure Highlightjs，是WordPress插件。

无意中看到别人家的博客代码高亮非常漂亮，如下图所示，Mac OS风格，查阅资料为Pure Highlightjs，是WordPress插件。奈何咱们的博客不是WordPress程序，长叹一声~ 不过还好，Pure Highlightjs是基于Highlightjs，而本博客用的编辑器是帝国cms自带的ckeditor，ckeditor的代码高亮插件codesnippet也是基于Highlightjs，嘿嘿，那么动手改造吧。
关于ckeditor安装codesnippet高亮插件网上教程很多，本篇不再赘述，小伙伴们可自行查阅资料安装。
一、对比两个插件生成的高亮html代码
1、codesnippet生成的高亮Html代码

<pre>
<code class="language-java hljs">
xxxxxx
</code>
</pre>

2、**c风格主题Pure Highlightjs生成的高亮Html代码

<pre class="pure-highlightjs line-numbers language-java">
<code class=" language-java">
xxxxxxxx
</code>
</pre>

对比之下发现，Pure Highlightjs生成的高亮代码中，pre标签多了pure-highlightjs line-numbers language-*这三个class。
二、动手改造找到e/admin/ecmseditor/infoeditor/plugins/codesnippet目录下plugin.js修改
1、给template加上这三个class

template: '<pre class="pure-highlightjs line-numbers ' + codeClass + '"><code class="' + codeClass + '"></code></pre>'

2、修改 data函数，更新代码时，同时修改pre标签的language-* class

data: function() {
var newData = this.data,
oldData = this.oldData;

if ( newData.code )
this.parts.code.setHtml( CKEDITOR.tools.htmlEncode( newData.code ) );

// Remove old .language-* class.
if ( oldData && newData.lang != oldData.lang ) {
var odl = oldData.lang;
this.parts.code.removeClass( 'language-' + odl );
//修改代码时，更新pre标签的language-* class
this.parts.pre.removeClass( 'language-' + odl );
}

// Lang needs to be specified in order to apply for**tting.
if ( newData.lang ) {
// Apply new .language-* class.
var ndl = newData.lang;
this.parts.code.addClass( 'language-' + ndl );
//修改代码时，更新pre标签的language-* class
this.parts.pre.addClass( 'language-' + ndl );
this.highlight();
}

// Save oldData.
this.oldData = CKEDITOR.tools.copy( newData );
}

3、修改upcast函数，提交代码时，添加pre的language-*

upcast: function( el, data ) {
if ( el.name != 'pre' )
return;

var childrenArray = getNonEmptyChildren( el ),
code;

if ( childrenArray.length != 1 || ( code = childrenArray[ 0 ] ).name != 'code' )
return;

// Upcast <code> with text only: https://dev.ckeditor.com/ticket/11926#comment:4
if ( code.children.length != 1 || code.children[ 0 ].type != CKEDITOR.NODE_TEXT )
return;

// Read language-* from <code> class attribute.
var **tchResult = editor._.codesnippet.langsRegex.exec( code.attributes[ 'class' ] );

if ( **tchResult )
data.lang = **tchResult[ 1 ];

// Use textarea to decode HTML entities (https://dev.ckeditor.com/ticket/11926).
textarea.setHtml( code.getHtml() );
data.code = textarea.getValue();

code.addClass( codeClass );
//pre标签添加codeClass
el.addClass( codeClass );
return el;
}

4、修改downcast函数

downcast: function( el ) {
var code = el.getFirst( 'code' );

// Remove pretty for**tting from <code>...</code>.
code.children.length = 0;

// Remove config#codeSnippet_codeClass.
code.removeClass( codeClass );
//删除pre标签codeClass
el.removeClass( codeClass );

// Set raw text inside <code>...</code>.
code.add( new CKEDITOR.htmlParser.text( CKEDITOR.tools.htmlEncode( this.data.code ) ) );

return el;
}

三、加入Pure Highlightjs的js和样式文件
涉及到的js和css文件：pri**.js，**c.css，clipboard.min.js，需要的小伙伴可以直接从本博客代码中获取
►这篇教程可能很多人不是很明白，为了方便大家实现功能，我们又更了详细的步骤教程，查阅>>帝国cms编辑器ckeditor代码高亮前端显示mac风格（更新时间2025年09月18日）