成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

MartinHan / 2121人閱讀

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

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

第一步：如何使用

1.官網(wǎng)下載https://ckeditor.com/ckeditor...，分別是簡易版、標(biāo)準(zhǔn)版、全面版、自定義四個選項(xiàng)，下載哪個根據(jù)你的訴求來。

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







Document

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

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

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

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

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

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

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96485.html

相關(guān)文章

  • Ckeditor富文本編輯器

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

    cpupro 評論0 收藏0

  • Django搭建個人博客：使用django-ckeditor富文本編輯器

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

    beanlam 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇)

    摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了，體現(xiàn)出了社區(qū)對其的認(rèn)可。監(jiān)聽事件手動維護(hù)列表這樣我們就簡單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    Channe 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇)

    摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了，體現(xiàn)出了社區(qū)對其的認(rèn)可。監(jiān)聽事件手動維護(hù)列表這樣我們就簡單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    zgbgx 評論0 收藏0

發(fā)表評論

0條評論

MartinHan

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<