如何在CKEditor中插入圖片並始終添加鏈接至全尺寸圖片

-1

我有CKEditor已啓動並正在運行，但我希望在插入圖片時自動在其之前添加<a href="...">標籤。這是爲了讓人們可以點擊img來查看它的實際大小。如何在CKEditor中插入圖片並始終添加鏈接至全尺寸圖片

目前，插入一張圖片到編輯器時，它看起來就像這樣：

<img alt="" src="/cms2/media/image/versuch(4).jpg" style="width: 1620px; height: 1080px;" />

我想這是一個<a href="..."></a>標籤，像這樣：

<a href="/cms2/media/image/versuch(4).jpg"><img alt="" src="/cms2/media/image/versuch(4).jpg" style="width: 1620px; height: 1080px;" /></a>

我怎麼能做這個？

來源

2014-09-26 Chris

請與我們分享您試圖做的事情。 – 2014-09-26 19:33:47

請不要將代碼轉儲到註釋中。用新信息更新您的原始帖子。 – 2014-09-26 19:38:23

這不是上傳，這是插入。此外，如果您在詢問後再閱讀問題並幫助您瞭解問題是否有意義並且格式正確，它會有所幫助。 – Nenotlep 2014-09-30 08:24:42

您需要聆聽正在關閉的圖像對話框，並且在關閉圖像對話框後，您需要自己插入標記。這是非常相似的https://stackoverflow.com/a/5071771/694325，我複製和編輯從那裏的代碼：

CKEDITOR.on('dialogDefinition', function(ev) { 
    // Take the dialog name and its definition from the event data 
    var dialogName = ev.data.name; 
    var dialogDefinition = ev.data.definition; 

    if (dialogName == 'image') { 
     dialogDefinition.onOk = function(e) { 
      var imageSrcUrl = e.sender.originalElement.$.src; 

      // HERE create your image element 
      // Note that you will need to insert the width and height too! 
      // Examine the available variables and DOM on how to do this. 
      // I won't do it for you :) 
      var htmlimg = '<img src="' + imageSrcUrl + '" style="width:100px;" />'; 
      var htmlstring = '<a href="' + imageSrcUrl + '">' + htmlimg + '</a>'; 

      CKEDITOR.instances.YOURINSTANCENAMEHERE.insertHtml(htmlstring); 
     }; 
    } 
}

來源

2014-09-30 08:35:37 Nenotlep

如何在CKEditor中插入圖片並始終添加鏈接至全尺寸圖片

回答

相關問題