PHPCMS

PHPCMS V9 后台ckeditor编辑器插入代码并且代码高亮显示(附插件)

来源:淘码站 时间:2019-03-03

今天分享一个简单的方法,来实现ckeditor编辑器上添加代码高亮功能,希望对大家有用,效果见本站。

最新PHPCMS V9文章中实现代码高亮显示的功能,以下是教程及相关代码:

【第一步】 在文章底部下载phpcms v9代码高亮压缩包。

【第二步】 将codeblock文件夹复制到 /statics/js/ckeditor/plugins 文件夹下

【第三步】 将content.css复制到 /statics/js/ckeditor 文件夹下(如果有,请将样式追加到原文件后)

【第四步】 打开 /statics/js/ckeditor/ckeditor.js 文件,找到以下代码,进行修改

tabletools,templates,toolbar,undo,wsc,wysiwygarea//  
//添加 codeblock  
//修改为如下 
tabletools,templates,toolbar,undo,wsc,wysiwygarea,codeblock 

【第五步】 打开 /phpcms/libs/classes/form.class.php 文件,查找以下代码,进行修改

['Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],  
//增加 CodeBlock  
//修改为
['Table','HorizontalRule','Smiley','SpecialChar','PageBreak','CodeBlock'], 

【第六步】 打开 /phpcms/templates/default/content/header.html模板文件,在head部分引用CSS文件:

<link href="{JS_PATH}ckeditor/contents.css" rel="stylesheet" type="text/css" />

,或者直接把css代码写到现有的css文件中去。

以上代码,经测试完全可以使用

 

压缩包:代码块附件

相关文章