今天秀站網(wǎng)發(fā)布一片織夢自帶HTML編輯器ckeditor升級ckeditor4.7.0，老版本編輯器沒有代碼插入高亮顯示、代碼顯示行號功能。
默認(rèn)織夢ckeditor編輯器界面老土，今日升級一個版本到4.7.0，重點(diǎn)是再加入代碼插入高亮顯示、代碼顯示行號功能。
ckeditor4.7.0下載地址：
修復(fù)了GBK編碼兼容性問題，修復(fù)代碼高亮異常。下載鏈接：https://pan.baidu.com/s/1gIsPhrp_stWvtGC5Dwhatw 提取碼：i5el
一：ckeditor升級到ckeditor4.7.0步驟
升級之前，先備份下include 文件夾。1：下載升級文件（升級文件分為GBK和UTF，請上傳對應(yīng)編碼）。
2：上傳文件。
3：更新瀏覽器緩存，刷新后臺，再去發(fā)篇文章試試，織夢的編輯器是否已煥然一新，而且增加了插入代碼這個按鈕。
二、插入代碼段功能高亮顯示
剛剛第一步，我們進(jìn)行了程序編輯器升級，功能可用。想要下圖的這種效果，就需要做更改。
只需要在前臺的模板中引用如下兩個文件：
<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> |
三、代碼前增加行號功能
實(shí)現(xiàn)效果如圖
創(chuàng)建JS文件，并調(diào)用JS文件，JS內(nèi)代碼為：
//xiuzhanwang.com
$(function () {
$("code").each(function () {
$(this).html("<ol><li>" + $(this).html().replace(/
/g, "
</li><li>") + "
</li></ol>");
});
});
|
