|
織夢編輯器增加插入代碼功能且前臺文章中高亮 dedecms系統文章顯示代碼高亮的教程網上有很多，有將織夢編輯器換為百度編輯器實現代碼高亮的，也有插件的各種各樣的方法，今天諸城人家個人博客分享的這個也是個編輯器插件，就是在dedecms原來的編輯器上面做升級（ckeditor4.7.0）。 本文分為三部分：織夢編輯器實現代碼插入功能，織夢文章代碼高亮顯示，代碼高亮顯示增加行號 織夢編輯器實現代碼插入功能 PS：使用前備份好include/inc/inc_fun_funAdmin.php這個文件 1.下載并解壓出來（提取碼：m477），包含了GBK和UTF8版本；插件來源： 之前發過一篇文章，同樣可以實現前臺代碼高亮《》不過我不是很喜歡百度編輯器！ 2.選擇程序對應的編碼文件夾中的文件，覆蓋到你織夢網站根目錄下。 3.更新瀏覽器緩存，刷新后臺，再去發篇文章試試，織夢的編輯器是否已煥然一新，而且增加了插入代碼這個按鈕。 PS：如果你用的不是dede自帶的編輯器，請將【系統】-【系統基本參數設置】-【核心設置】-【Html編輯器】改為【ckeditor】 織夢文章代碼高亮顯示 剛才我們只是在織夢后臺編輯器添加了插入代碼功能，但是前臺并沒有高亮顯示，還需要做一些改動。 1.在前臺的模板中引用如下兩個文件： 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 PS：上面這樣引用，鏈接太長，不美觀，我們可以將這兩個文件復制到我們存放css和js的文件目錄再進行引用（是復制，不是剪切也不是移動），比如： link rel=stylesheet href=http://www.vipshan.com/skin/css/rainbow.css script src=http://www.vipshan.com/skin/js/highlight.pack.js/script PS：更多風格可以到預覽挑選，在/include/ckeditor/plugins/codesnippet/lib/highlight/styles/目錄中直接進行引用就好，如果沒有對應的css的可以到下載； 2.這時雖然前臺文章中的代碼是高亮顯示了，但是并不能自適應頁面大小，超出的部分很難看，解決代碼自動換行可以在.hljs{}下面加入： white-space: pre-wrap; word-break: break-all; 如果想要不自動換行而是顯示滾動條，可以在css樣式中的.hljs{}下面加入： overflow-y: auto; 最后一步就是添加行號了 以下方法參考自 1.將下面這段js加到你網站的共有js中（不能添加在highlight.pack.js內，因為此方法并非使用highlight.pack.js函數來完成的） //vipshan.com $(function () { $(code).each(function () { $(this).html(olli + $(this).html().replace(/ /g, /lili) + /li/ol); }); }); PS：以上代碼的原理是：將代碼中的換行(/n)替換成 /lili, 然后在代碼內容的前面添加 olli, 而最后添加/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; } 織后臺編輯器增加插入代碼功能，前臺文章中代碼高亮顯示，最終效果可以瀏覽本文中（本站）代碼高亮部分。 織夢插入代碼前亮顯示插件下載 下載地址 提取碼：m477 - END - 瀏覽完了？你可以留下觀點！
|
