怎么將服務(wù)端圖片插入到CKEditor中

怎么將服務(wù)端圖片插入到CKEditor中？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

第一、定義插件

1.在ckeditor\plugins文件夾下,新建serverimg文件夾，

2.在serverimg下新建plugin.js 文件，

CKEDITOR.plugins.add(
 "serverimg",
 {
 requires: ["dialog"],
 lang: ["en"],
 init: function (editor) {
 editor.addCommand("serverimg", new CKEDITOR.dialogCommand("serverimg"));
 editor.ui.addButton(
 "serverimg",
 {
 label: "插入服務(wù)端圖片",
 command: "serverimg",
 icon: this.path + "images/pic.png",
 toolbar: 'insert'
 });
 CKEDITOR.dialog.add("serverimg", this.path + "dialogs/code.js");
 }
 }
);

3.在serverimg下新建image，里面存放圖標(biāo)使用的圖片pic.png 

第二、定義插件中的對(duì)話框內(nèi)容

1.在serverimg中新建dialogs文件夾，

2.在dialogs文件內(nèi)，分別創(chuàng)建code.js (用于執(zhí)行彈出對(duì)話框執(zhí)行的js代碼)和PicPreview.html（用于瀏覽服務(wù)器圖片）

3.code.js 代碼如下

CKEDITOR.dialog.add(
 "serverimg",
 function (editor) {
 var timestamp = Math.round(new Date().getTime() / 1000);
 var ckeditorPage = '../../ImgMgr/ImgBrowser.aspx?from=ckeditor&timestamp=' + timestamp;
 return {
 title: "插入代碼",
 minWidth: 800,
 minHeight: 600,
 contents:
 [
 {
  id: "tab1",
  label: "",
  title: "",
  expand: true,
  padding: 0,
  elements:
  [
  {
  type: "html",
  html: "<iframe id='img_browser'name='img_browser' src='" + ckeditorPage + "'></iframe>",
  style: "width:100%;height:600px;padding:0;"// style='width:800px;height:600px'
  }
  ]
 }
 ],
 onOk: function () { 
 
 //插入富文本編輯器內(nèi)容 window.frames["img_browser"].document.getElementById("hf_imgsrc");//
 var hf = document.getElementById('img_browser').contentWindow.document.getElementById("hf_imgsrc");
 if (hf != null) {
  var imgSrc = hf.value;  
  editor.insertHtml("<img src='" + imgSrc + "' />"); //將select插入編輯器
 
 } else {
  alert("hf is null");
 }
 
 },
 //onHide: function () { document.getElementById('img_browser').contentDocument.location.reload(); },
 //resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT
 };
 }
);

4.說(shuō)明，由于我在彈出的對(duì)話框中插入的是一個(gè)iframe，src正好是我自己做的一個(gè)瀏覽服務(wù)器圖片的頁(yè)面，當(dāng)選中圖片后，點(diǎn)擊對(duì)話框中的確定按鈕，即可獲取圖片路徑，

最終包裝成img ，插入到富文本編輯器里面 ，當(dāng)然你可以做的更好，允許圖片設(shè)置寬度和高度，這里就不在講了。 

第三、配置插件

    上面的插件開(kāi)發(fā)完成后，頁(yè)面上并不會(huì)顯示我們開(kāi)發(fā)的插件，還需要配置下config.js，找到ckeditor文件下的config.js 打開(kāi)，在配置里面增加config.extraPlugins = 'serverimg';

看完上述內(nèi)容，你們掌握怎么將服務(wù)端圖片插入到CKEditor中的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！