1.首先準(zhǔn)備所需要的插件

??? （1）. CKEditor4.4.5? 下載地址：http://ckeditor.com/download。如果不想下載直接引用CKEditor的CDN也是可以的。cdn地址：<script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>

??? （2）. 自從4.1版發(fā)布之后，插入高亮代碼功能已經(jīng)提供相應(yīng)的功能。不用用戶在自己去寫擴(kuò)展組件。只是需要用戶下載codesnippet插件放到CKEditor的plugins目錄即可。

　　Code Snippet的下載地址：http://ckeditor.com/addon/codesnippet

　　Code Snippet是CKEditor4.4.1的新插件，主要提供添加代碼片段高亮顯示的功能。另外注意一點(diǎn)的是，Code Snippet只是作為CKEditor的插件，真正實(shí)現(xiàn)代碼高亮的是highlight.js這個(gè)代碼高亮JS庫。

　　Code Snippet只是將highlight.js作為默認(rèn)的高亮庫,由于highlight.js已經(jīng)集成在Code Snippet中，所以我們?cè)谑褂肅KEditor時(shí)候是不需要另外再引用highlight.js這個(gè)庫。（點(diǎn)擊這里查看highlight.js的官方網(wǎng)站）。

　　以前的CKEditor版本由于沒有比較好的代碼高亮插件，都是自己自定義插件，當(dāng)時(shí)用的是SyntaxHighlighter這個(gè)代碼高亮庫。大家也可網(wǎng)上搜下SyntaxHighlighter的資料。

?

然后設(shè)置下ckeditor的config.js配置文件,將插件添加進(jìn)去即可,代碼如下(這里只設(shè)置了一個(gè)插件屬性，其他屬性可根據(jù)需要設(shè)置)：

????

?? 也可以設(shè)置高亮樣式：config.codeSnippet_theme = 'zenburn'; 默認(rèn)的是defualt;

這里有一點(diǎn)需要注意，如果按照上面添加插件的步驟而出現(xiàn)下面這兩個(gè)錯(cuò)誤：關(guān)于lineutils和widget 的，意思是找不到這兩個(gè)插件。這時(shí)需要我們?nèi)ス倬W(wǎng)下載這個(gè)插件加入即可：

lineutils 下載地址： http://ckeditor.com/addon/lineutils

widget 下載地址：http://ckeditor.com/addon/widget

下載頁面如圖所示：

這里提供兩個(gè)方式可以加入此插件，1就是直接下載，2.點(diǎn)擊Add to my editor按鈕。在線添加插件。

此時(shí)高亮代碼已經(jīng)添加成功l.

?

第二部分上傳圖片

和以往的版本不同。4.4.5版本上傳圖片也增加了叫ckfinder的插件。

CKFinder 下載地址： http://cksource.com/ckfinder/download，注意：根據(jù)自己情況下載不同語言版本的。

稍后更新。沒時(shí)間了。

轉(zhuǎn)載于:https://www.cnblogs.com/zhanjun/p/3998620.html

總結(jié)

以上是生活随笔為你收集整理的CKEditor4.4.5 插入高度代码及上传图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。