您现在的位置是:首页 > 教程 > dedecms教程dedecms教程
实现dedecms5.7代码高亮的方法
孟航沛2023-12-25 23:57:42dedecms教程已有人查阅
导读很多做网站的朋友在应用CMS都需要代码高亮,而我们的织梦CMS却不像Wordpress一样又大把大把的插件可用,如何实现织梦模板 5.7代码高亮呢?在网上搜了很长时间资料
很多做网站的朋友在应用CMS都需要代码高亮,而我们的织梦CMS却不像Wordpress一样又大把大把的插件可用,如何实现织梦模板 5.7代码高亮呢?在网上搜了很长时间资料,大都写的是CKEditor和SyntaxHighlighter整合的文章,但是织梦模板将ckeditor做了集成,和一般的只针对于ckeditor对config.js修改不同。所以只能自己琢磨修改了,现将方法写出供站长朋友们参考:
一、首先去SyntaxHighlighter官方网站下载,网址: /static/upload/image/20231003/n4lm2awus2u图片文件,该图片文件在编辑器工具栏上显示,可以使用16*16像素的图片
四、新建lang文件夹,是语言包,里面有两个文件,一个是中文cn.js一个是英文en.js;
五、新建plugin.js文件,该文件是ckeditor插件必须得文件,里面是对该插件的一些配置,代码如下:
六、由于织梦模板 5.7自己集成了一个dedepage插件,用来添加ckeditor自定义插件,在/include/ckeditor/dedepage文件夹下,打开plugin.js文件在之后面添加:
requires:['yntaxhighlight']中syntaxhighlight为代码高亮插件的文件夹名,添加完之后的代码如下:
七,修改/include/ckeditor/ckeditor.inc.php文件,在$toolbar['sic']的之后一行添加元素Code,修改后代码如下:
至此,编辑器的修改已经完成,修改后的syntaxhighlight文件夹文件目录结构图如下图:
将syntaxhighlight文件夹上传到/include/ckeditor/plugins/文件夹下,打开后台,添加文章试一下,看看编辑器的上之后一行是否出现了如图所示的按钮:
点击按钮弹出如下图所示的对话框输入代码,并且可以切换到高级选项对代码高亮显示做一些配置:
八,但是光这些还不够,还要在文章模板文件/templets/default/article_article.htm文件里引入高亮显示的笔刷JS文件和CSS文件,由于是需要引入很多JS,所以建议将引入的代码放在</body>标签之前,等待前面的网页加载完后加载,进行显示。
引入代码如下:
之后发表并生成的文章页面;
当然,该整合也有点缺点,就是在html页面页面中可能会引入大量的JS文件,加载起来可能会比较慢,另外可拓展性不强,我也会不定期优化该插件,也希望各位网友能提出意见。
一、首先去SyntaxHighlighter官方网站下载,网址: /static/upload/image/20231003/n4lm2awus2u图片文件,该图片文件在编辑器工具栏上显示,可以使用16*16像素的图片
四、新建lang文件夹,是语言包,里面有两个文件,一个是中文cn.js一个是英文en.js;
五、新建plugin.js文件,该文件是ckeditor插件必须得文件,里面是对该插件的一些配置,代码如下:
六、由于织梦模板 5.7自己集成了一个dedepage插件,用来添加ckeditor自定义插件,在/include/ckeditor/dedepage文件夹下,打开plugin.js文件在之后面添加:
requires:['yntaxhighlight']中syntaxhighlight为代码高亮插件的文件夹名,添加完之后的代码如下:
七,修改/include/ckeditor/ckeditor.inc.php文件,在$toolbar['sic']的之后一行添加元素Code,修改后代码如下:
至此,编辑器的修改已经完成,修改后的syntaxhighlight文件夹文件目录结构图如下图:
将syntaxhighlight文件夹上传到/include/ckeditor/plugins/文件夹下,打开后台,添加文章试一下,看看编辑器的上之后一行是否出现了如图所示的按钮:
点击按钮弹出如下图所示的对话框输入代码,并且可以切换到高级选项对代码高亮显示做一些配置:
八,但是光这些还不够,还要在文章模板文件/templets/default/article_article.htm文件里引入高亮显示的笔刷JS文件和CSS文件,由于是需要引入很多JS,所以建议将引入的代码放在</body>标签之前,等待前面的网页加载完后加载,进行显示。
引入代码如下:
之后发表并生成的文章页面;
当然,该整合也有点缺点,就是在html页面页面中可能会引入大量的JS文件,加载起来可能会比较慢,另外可拓展性不强,我也会不定期优化该插件,也希望各位网友能提出意见。
本文标签:
很赞哦! ()
相关文章
随机图文
-
dedecms自定义表单列表编辑内容联动地区显示为数字的方法
解决方法;打开 \dede\templets\diy_edit_content.htm 找到这一块PHP代码改成 -
dedecms实现自动统计当前栏目文档数量的方法
本文实例讲述了Dedecms实现自动统计当前栏目文档总数的方法。分享给大家供大家参考。具体分析如下:统计当前栏目有多少文章数量我们常用的有两种办法 -
dede织梦的sql语句调用方法实例介绍
看似简单的一段代码,功能却是很强大。 dede_arctype 栏目内容表 content 栏目内容字段名 cn_substr() 这个dede常用的字符串截取函数 -
dede织梦实现列表隔行变色以及分组加线的方法
打开:inc_channel_unit_functions.php加入下面一段;第一个,如果你定义了相关css,就是隔行变色
留言与评论 (共有 条评论) |