編輯由CKEditor插入的圖像。

我使用CKEditor進行ASP。 NET與我的網站中的增強圖像。當我插入圖片時，我得到的代碼對我來說並不好。我想替換一些標籤。我試圖用String.Replace，String.IndexOf等方法來替換標籤，但它並沒有做出反應。我想嘗試修改CKEditor的源代碼以達到我的目標。當我使用簡單的圖片，無需簽名/描述，我得到這樣的代碼（浮動取決於選擇的選項）：編輯由CKEditor插入的圖像。

<p> 
<img width="481" height="361" style="float:right" src="/Images/ev1.jpg" alt=""> 
</p>

我想將它轉化成這樣：

<a data-lightbox="gallery" href="/Images/ev1.jpg" class="image-container span4" style="float:right;margin:5px"> 
    <img class="shadow" style="margin:5px" src="/Images/ev1.jpg"> 
</a>

另一個結果是當我使用圖像描述。我得到這個代碼：

<figure class="image" style="float:left"> 
<img width="579" height="445" src="/Images/ev2.jpg" alt=""> 
<figcaption>This is picture description</figcaption> 
</figure>

應該看看哪些是這樣的：

<a data-lightbox="postPhoto" href="/Images/ev2.jpg" class="image-container span4" style="float:left;margin:5px"> 
    <img width="579" height="445" src="/Images/ev2.jpg" alt=""> 
    <div class="overlay">This is picture description</div> 
</a>

你能，請幫助我解決我的問題呢？

來源

2014-08-28 dzeju555

需要很長時間才能發表評論。

這是圖像還是image2插件？這是一個巨大的改變 - 我確定你不想編輯CKE源來做到這一點，而是傾聽圖像插入，然後即時編輯插入的元素。至於你可能想要聽的活動，看看the awesome CKE docs - 那裏有60個不同的活動，其中一個可能適合你。

或者，您可以製作自己的圖像插件 - 它實際上非常可行，插件指南和系統在CKEditor中非常好。特別是如果圖像可以是小部件，並做一些像image2的副本。

此外，自然塊級元素（p和figure）轉換爲一個內聯元素（a）是大語義變化 - 你確定要這麼做？當然，你想要一些塊級父母，而不是像這樣直接放在身體上？嘗試評估您的要求以及解決方案。

來源

2014-08-29 06:04:36 Nenotlep

我最近提出了類似的調整的圖像2插件，變化在圖像2文件夾plugin.js（CKEditor的/插件/ IMAGE2/plugin.js），所述第一線中的一個：

var template = '<a href="" data-lightbox="image-1" data-title="My caption"><img alt="" src=""></a>',

，然後就this.parts.image.setAttributes之前我加入

this.parts.link.setAttributes({ 
        href: this.data.src, 
        'data-lightbox': this.data.alt 
       });

這將創建收藏clickon的形象，但是對於數據燈箱和數據所有權的選擇不是在對話框中納入的是，這是一個進一步優化，但這應該讓你開始

來源

2014-09-29 18:17:03 tomzooi

編輯由CKEditor插入的圖像。

回答

相關問題