1.首先準備所需要的插件

??? （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)的功能。不用用戶在自己去寫擴展組件。只是需要用戶下載codesnippet插件放到CKEditor的plugins目錄即可。

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

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

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

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

?

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

????

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

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

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

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

下載頁面如圖所示：

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

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

?

第二部分上傳圖片

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

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

稍后更新。沒時間了。

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

總結(jié)

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

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