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