編輯由CKEditor插入的圖像

Question

我將CKEditor用於ASP。 NET與我的站點中的增強圖像。 當我插入圖像時，我得到的代碼對我不利。 我想替換一些標簽。 我嘗試使用String.Replace，String.IndexOf等方法替換標簽，但沒有任何意義。 我想嘗試修改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>

您能幫我解決我的問題嗎？

Answer 1

太久不能發表評論。

這是圖像或image2插件嗎？ 這是一個巨大的更改-我確定您不想編輯CKE源來執行此操作，而是要偵聽圖像插入，然后即時編輯插入的元素。 至於您可能想聽的事件，請看一下很棒的CKE文檔 -那里有60個不同的事件，其中之一可能適合您。

另外，您也可以制作自己的圖像插件-實際上是可行的，該插件指南和系統在CKEditor中都非常出色。 尤其是當圖像可以是小部件並且執行諸如image2副本之類的操作時。

另外，將自然的塊級元素（ p和figure ）轉換為內聯元素（ a ）是一項重大的語義更改-您確定要這樣做嗎？ 您確定要一些塊級父級，而不是像這樣將它們直接放在身體上嗎？ 嘗試評估您的要求以及解決方案。

Answer 2

我最近對image2插件進行了類似的調整，對image2文件夾（ckeditor / plugins / image2 / plugin.js）中的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
                } );

這會創建帶有lightbox clickon的圖像，但是對話框中尚未包含data-lightbox和data-title的選項，這是進一步的優化，但這應該可以幫助您入門。