富文本編輯器CKeditor的配置和圖片上傳，看完不后悔

MartinHan 發布于2019-08-23 10:35 / 2112人閱讀

摘要：是一款富文本編輯器，本文將用極為簡單的方式介紹一下它的使用和困擾大家很久的圖片上傳問題，要有耐心。第一步如何使用官網下載，分別是簡易版標準版全面版自定義四個選項，下載哪個根據你的訴求來。

CKeditor是一款富文本編輯器，本文將用極為簡單的方式介紹一下它的使用和困擾大家很久的圖片上傳問題，要有耐心。

第一步：如何使用

1.官網下載https://ckeditor.com/ckeditor...，分別是簡易版、標準版、全面版、自定義四個選項，下載哪個根據你的訴求來。

2.下載成功后---->解壓得到一個ckeditor文件夾----->把ckeditor文件夾上傳到服務器上（或本地的靜態服務上）------>本地新建一個demo.htm如下







Document

3.運行demo.html就能看見編輯器了獲取編輯器數據用 var data = CKEDITOR.instances.editor1.getData()

第二步：如何通過編輯器上傳圖片到服務器

1.找到ckeditor/config.js，原來亂七八糟的全刪了，修改如下

CKEDITOR.editorConfig = function( config )
{
config.filebrowserImageUploadUrl = "/void/imgupload/ckeditorUpload?type=image";
};

2.解釋一下，這個"/void/imgupload/ckeditorUpload"是自己定義的本地接收圖片的接口，你需要寫接收保存圖片的邏輯

3.重點！！這個接口接受保存完圖片怎么反饋呢？？答案是：新版本的ckeditor要返回json格式如下：

{
"uploaded": 1,   //寫死的
"fileName": filename,  //圖片名
"url": url  //上傳服務器的圖片的url
}

舊版本要返回js代碼！！！如下：

callback = request.args.get("CKEditorFuncNum")
resData = ""
return resData

解釋：url是上傳服務器的圖片的url callback是要接收get參數，參數名是“CKEditorFuncNum” ，callback一定不能缺

補充：ckeditor新版舊版怎么區分呢？舊版在請求的時候url有"CKEditorFuncNum"參數，新版則沒有（本人見解，不明白留言解答）

==========================================================

云服務器 GPU云服務器富文本編輯器富文本web編輯器編輯器圖片上傳富文本

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96485.html

Ckeditor富文本編輯器

摘要：開發工具與關鍵技術撰寫時間下面我們講富文本編輯器的使用要使用富文本編輯器，需要在官網中下載插件，下載后會得到一個文件其中包含以下文件，我們主要使用的是文件在頁面中使用在頁面中標簽引用標簽是富文本編輯器的操作對象，在需要 ...

cpupro 2021-09-28 09:35 評論0 收藏0
Django搭建個人博客：使用django-ckeditor富文本編輯器

摘要：后面兩個編輯器自帶，不用單獨下載，添上就可以了添加相關插件這樣就完成了代碼高亮效果不錯在前臺使用為了讓用戶在前臺也能使用富文本編輯器，還得對代碼稍加改動。對于有些不喜歡的人來說，甚至可以連博文都使用提供的富文本編輯器。前面我們已經實現了用Markdown語法寫文章了。但是文章的評論用Markdown就不太合適了，你不能強求用戶也花時間去熟悉語法啊。另外評論中通常還有表情、帶顏色的字體...

beanlam 2019-07-31 10:11 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

zgbgx 2019-08-29 12:46 評論0 收藏0