代理加盟 2020全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

您现在的位置: 麦站网 > 织梦大学 > 模块插件 >

织梦编辑器ckeditor升级ckeditor4.7.0版本并加入代码高亮功能

来源:本站原创 发布时间:2019-12-25 22:07:58热度:我要评论(0

免费下载,无需注册无需充值

今天秀站网发布一片织梦自带HTML编辑器ckeditor升级ckeditor4.7.0,老版本编辑器没有代码插入高亮显示、代码显示行号功能。

默认织梦ckeditor编辑器界面老土,今日升级一个版本到4.7.0,重点是再加入代码插入高亮显示代码显示行号功能。

ckeditor4.7.0下载地址:

修复了GBK编码兼容性问题,修复代码高亮异常。

下载链接:https://pan.baidu.com/s/1gIsPhrp_stWvtGC5Dwhatw  提取码:i5el

一:ckeditor升级到ckeditor4.7.0步骤

升级之前,先备份下include 文件夹。

1:下载升级文件(升级文件分为GBK和UTF,请上传对应编码)。

织梦编辑器ckeditor升级ckeditor4.7.0版本并加入代码高亮功能

2:上传文件。

织梦编辑器ckeditor升级ckeditor4.7.0版本并加入代码高亮功能

3:更新浏览器缓存,刷新后台,再去发篇文章试试,织梦的编辑器是否已焕然一新,而且增加了插入代码这个按钮。

织梦编辑器ckeditor升级ckeditor4.7.0版本并加入代码高亮功能

织梦内容编辑器

二、插入代码段功能高亮显示

刚刚第一步,我们进行了程序编辑器升级,功能可用。想要下图的这种效果,就需要做更改。

织梦编辑器ckeditor升级ckeditor4.7.0版本并加入代码高亮功能
只需要在前台的模板中引用如下两个文件:

<link rel="stylesheet" href="/include/ckeditor/plugins/codesnippet/lib/highlight/styles/rainbow.css">
<script src="/include/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>

三、代码前增加行号功能

实现效果如图

织梦编辑器ckeditor升级ckeditor4.7.0版本并加入代码高亮功能

创建JS文件,并调用JS文件,JS内代码为:

//xiuzhanwang.com
$(function () { 
    $("code").each(function () { 
        $(this).html("<ol><li>" + $(this).html().replace(/
/g, "
</li><li>") + "
</li></ol>"); 
    }); 
}); 

 

转载请注明来源网址:https://www.xiuzhanwang.com/dedecms_mk/2028.html

    发表评论

    评论列表(条)