织梦编辑器ckeditor升级ckeditor4.7.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>"); 
    }); 
}); 

 

上一篇:dedecms织梦内容编辑器更换为wangEditor编辑器方法

下一篇:织梦使用Kindeditor编辑器方法及下载地址

相关文章

织梦安装Markdown编辑器插件

织梦企业官网小程序插件(转载)

织梦图集上传flash控件失效,改进layui批量上传

织梦微信分享插件

织梦伪静态插件、一键开启伪静态下载

添加微信
添加微信,免费咨询

15205695834

新手指南支付购买售后服务关于我们版权合规
合肥秀站网络科技有限公司
Copyright 2002-2022 麦站 版权所有
皖ICP备12018676号 网站地图