CKEditor代码高亮显示插件Code Snippet安装及使用方法
CKEditor網(wǎng)頁編輯器
CKEditor 即 FCKEDITOR 。FCKeditor是目前最優(yōu)秀的可見即可得網(wǎng)頁編輯器之一，它采用JavaScript編寫。具備功能強大、配置容易、跨瀏覽器、支持多種編程語言、開源等特點。它非常流行，互聯(lián)網(wǎng)上很容易找到相關(guān)技術(shù)文檔，國內(nèi)許多WEB項目和大型網(wǎng)站均采用了FCKeditor。本文為大家講解的是CKEditor代碼高亮顯示(代碼并色)插件Code Snippet的安裝及使用方法，感興趣的同學(xué)參考下。
CKEditor 簡介
CKEditor 即 FCKEDITOR 。FCKeditor是目前最優(yōu)秀的可見即可得網(wǎng)頁編輯器之一，它采用JavaScript編寫。具備功能強大、配置容易、跨瀏覽器、支持多種編程語言、開源等特點。它非常流行，互聯(lián)網(wǎng)上很容易找到相關(guān)技術(shù)文檔，國內(nèi)許多WEB項目和大型網(wǎng)站均采用了FCKeditor。
隨著CKEditor4.4.1的發(fā)布，以前一直困擾的代碼高亮問題終于完美的得到解決，在CKEditor4.4中官方發(fā)布了Code Snippet這個代碼片段的插件，終于可以完美的內(nèi)嵌使用代碼高亮了，以前都是使用網(wǎng)友自己開發(fā)的代碼高亮插件。下面就來介紹如何使用Code Snippet這個代碼高亮插件。本文還介紹了CKEditor中如何安裝Code Snippet插件。
新版本附加信息
Code Snippet簡介
Code Snippet是CKEditor4.4.1的新插件，主要提供添加代碼片段高亮顯示的功能。另外注意一點的是，Code Snippet只是作為CKEditor的插件，真正實現(xiàn)代碼高亮的是highlight.js這個代碼高亮JS庫。
Code Snippet只是將highlight.js作為默認(rèn)的高亮庫,由于highlight.js已經(jīng)集成在Code Snippet中，所以我們在使用CKEditor時候是不需要另外再引用highlight.js這個庫。（點擊這里查看highlight.js的官方網(wǎng)站）。
以前的CKEditor版本由于沒有比較好的代碼高亮插件，都是自己自定義插件，當(dāng)時用的是SyntaxHighlighter這個代碼高亮庫。大家也可網(wǎng)上搜下SyntaxHighlighter的資料
如何安裝Code Snippet？添加代碼片段高亮插件的具體步驟
添加Code Snippet的方法很簡單，不過由于版本兼容問題，目前官網(wǎng)上這個插件對4.4兼容最好，其他兼容則未進(jìn)行測試，所以使用這個插件最好是將CKEditor升級到4.4.1。
如果已經(jīng)熟悉CKEditor的插件機制，那么我們只要到官網(wǎng)上將Code Snippet下載下來（下載地址見文章頂部），將里面的整個文件夾解壓到ckeditor文件夾下的plugins文件夾內(nèi)。
然后設(shè)置下ckeditor的config.js配置文件,將插件添加進(jìn)去即可,代碼如下(這里只設(shè)置了一個插件屬性，其他屬性可根據(jù)需要設(shè)置)：
CKEDITOR.editorConfig = function (config) {//添加插件，多個插件用逗號隔開config.extraPlugins = 'codesnippet';//使用zenburn的代碼高亮風(fēng)格樣式 PS:zenburn效果就是黑色背景//如果不設(shè)置著默認(rèn)風(fēng)格為defaultcodeSnippet_theme: 'zenburn'; }也可以在編輯器初始化的使用下面代碼添加高亮插件：
CKEDITOR.replace('文本框ID' ,{extraPlugins: 'codesnippet',codeSnippet_theme: 'zenburn'} );這里有一點需要注意，如果按照上面添加插件的步驟而出現(xiàn)下面這兩個錯誤：
這是因為下載的CKEditor缺少widget和lineutils插件，到官網(wǎng)將這兩個插件下載下來，只要將這兩個插件解壓到ckeditor 文件夾下的plugins文件夾內(nèi)就可以了。一般是先出現(xiàn)第一個widget插件無法找到的錯誤，添加了widget插件后才會出現(xiàn)第二個找不到 lineutils插件的錯誤，可見Code Snippet需要依靠這兩個插件。這兩個插件的下載地址如下：
還有最簡單的方式，首先打開Code Snippet下載地址，將插件添加到自定義CKEditor編輯器
然后進(jìn)入自定義CKEditor編輯器頁面，這里可以看到已經(jīng)將代碼高亮插件集成到CKEditor里面了，最后點擊下載就可以了，當(dāng)然這里有很多自定義UI和插件，可以選擇自己需要的插件和喜歡的編輯器界面。
這樣就完美的添加上了代碼片段高亮插件了。
如何讓代碼片段在普通頁面上顯示高亮？
我們會發(fā)現(xiàn)，雖然在編輯器中添加的代碼片段有高亮效果，但是將編輯器里的代碼片段放到頁面中卻沒有高亮的效果。這是因為編輯器的插件已經(jīng)默認(rèn)集成了highlight.js這個代碼高亮庫，所以我們要在頁面上顯示高亮就得重新引用和添加highlight.js庫。
我們先看下編輯器中的高亮代碼：
<pre> <code class="language-html"><!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head><meta charset="utf-8" /><title>測試頁面</title> </head> <body> <div>代碼片段高亮效果</div> </body> </html></code></pre>可以看到?高亮的效果主要是根據(jù)<pre>標(biāo)簽和 <code class="language-html">這兩個標(biāo)簽來顯示的，其中l(wèi)anguage-html表示的顯示高亮語言為HTML。 highlight.js就是根據(jù)這兩個標(biāo)簽來顯示高亮效果。
我們首先要將highlight.js下載下來（下載地址，可以選擇要高亮的編程語言種類），然后在需要代碼高亮的頁面添加下面的代碼：
<!--開頭這里的樣式為默認(rèn)的風(fēng)格，可以根據(jù)自己的喜好更換風(fēng)格--> <!--我的高亮效果是zenburn--> <link rel="stylesheet" href="styles/default.css"> <script src="highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script>要注意更改css樣式和JS的引用地址，地址以自己網(wǎng)站中highlight.js的存放地址為準(zhǔn)。另外高亮庫默認(rèn)使用的是default.css的高亮風(fēng)格，這里是highlightjs的各種代碼高亮風(fēng)格的顯示效果，大家可以到上面測試選擇自己喜歡的高亮風(fēng)格：http://highlightjs.org/static/test.html。highlightjs的具體使用方法可以看官網(wǎng)的文檔：http://highlightjs.org/usage/。
到這里就可以完整的將代碼片段進(jìn)行高亮顯示了。
關(guān)于效果，大家可以看一下本文的效果。
總結(jié)
以上是生活随笔為你收集整理的CKEditor代码高亮显示插件Code Snippet安装及使用方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一个页面中多个window.onload
- 下一篇： xheditor的使用方法