手工SEO

手工SEO首頁 DEDE教程 正文

織夢編輯器增加插入代碼功能且前臺文章中高亮顯示

手工SEO 2019-08-05 11:21:55 DEDE教程 169℃ 手工SEO

dedecms系統文章顯示代碼高亮的教程網上有很多,有將織夢編輯器換為百度編輯器實現代碼高亮的,也有插件的各種各樣的方法,今天深山個人博客分享的這個也是個編輯器插件,就是在dedecms原來的編輯器上面做升級(ckeditor4.7.0)。

本文分為三部分:織夢編輯器實現代碼插入功能,織夢文章代碼高亮顯示,代碼高亮顯示增加行號

織夢編輯器實現代碼插入功能

PS:使用前備份好include/inc/inc_fun_funAdmin.php這個文件

1.下載織夢編輯器ckeditor4.7.0.zip并解壓出來(提取碼:m477),包含了GBK和UTF8版本;插件來源:跟板網

之前發過一篇文章,同樣可以實現前臺代碼高亮《dede織夢更換百度ueditor編輯器實現代碼高亮教程》不過我不是很喜歡百度編輯器!

下載織夢編輯器ckeditor4.7.0.zip

2.選擇程序對應的編碼文件夾中的文件,覆蓋到你織夢網站根目錄下。

覆蓋到織夢網站根目錄

3.更新瀏覽器緩存,刷新后臺,再去發篇文章試試,織夢的編輯器是否已煥然一新,而且增加了插入代碼這個按鈕。

增加了插入代碼這個按鈕

可插入的代碼類型

PS:如果你用的不是dede自帶的編輯器,請將【系統】-【系統基本參數設置】-【核心設置】-【Html編輯器】改為【ckeditor】

織夢文章代碼高亮顯示

剛才我們只是在織夢后臺編輯器添加了插入代碼功能,但是前臺并沒有高亮顯示,還需要做一些改動。

1.在前臺的模板中引用如下兩個文件:

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

PS:上面這樣引用,鏈接太長,不美觀,我們可以將這兩個文件復制到我們存放css和js的文件目錄再進行引用(是復制,不是剪切也不是移動),比如:

<link href="http://www.vipshan.com/skin/css/rainbow.css"> <script src="http://www.vipshan.com/skin/js/highlight.pack.js"></script>

PS:更多風格可以到https://highlightjs.org/static/demo/預覽挑選,在/include/ckeditor/plugins/codesnippet/lib/highlight/styles/目錄中直接進行引用就好,如果沒有對應的css的可以到https://github.com/highlightjs/highlight.js/tree/master/src/styles下載;

2.這時雖然前臺文章中的代碼是高亮顯示了,但是并不能自適應頁面大小,超出的部分很難看,解決代碼自動換行可以在.hljs{}下面加入:

white-space: pre-wrap; word-break: break-all;?

加入white-space: pre-wrap

如果想要不自動換行而是顯示滾動條,可以在css樣式中的.hljs{}下面加入:

overflow-y: auto; 最后一步就是添加行號了

以下方法參考自疆飛博客

1.將下面這段js加到你網站的共有js中(不能添加在highlight.pack.js內,因為此方法并非使用highlight.pack.js函數來完成的)

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

PS:以上代碼的原理是:將代碼中的換行(/n)替換成 </li><li>, 然后在代碼內容的前面添加 <ol><li>, 而最后添加</li></ol>,這樣代碼就被<li></li>每行隔開了,再后通過css添加行數即可。

2.在控制高亮的css后面加入下面css代碼;更多效果需要自己調整了,這個沒辦法固定的。

/*vipshan.com*/ .hljs { ?? ?background: #eee !important; ?? ?padding: 1px; ?? ?white-space: pre-wrap; ?? ?word-break: break-all; } .hljs ul { ?? ?list-style: decimal; ?? ?background-color: #fff; ?? ?margin: 0px 0px 0 40px !important; ?? ?padding: 0px; } .hljs ul li { ?? ?list-style: decimal-leading-zero; ?? ?border-left: 2px solid #6ce26c !important; ?? ?background: #fff; ?? ?padding: 1px 5px 0 3px !important; ?? ?margin: 0 !important; ?? ?line-height: 15px; ?? ?word-break: break-all; ?? ?word-wrap: break-word; ?? ?line-height: 1.3; } .hljs ul li:nth-of-type(even) { ?? ?background-color: #fcfcfc; ?? ?color: inherit; }

織后臺編輯器增加插入代碼功能,前臺文章中代碼高亮顯示,最終效果可以瀏覽本文中(本站)代碼高亮部分。

上一篇:織夢發布文章時tag標簽無法保存的解決方法

下一篇:織夢內容中的錨文本超鏈接如何批量替換?

網站分類
標簽列表
河南快三计划