Javascript 编辑由编辑器插入的图像

我对ASP使用CKEditor。NET与增强图像在我的网站。当我插入图像时，我得到了对我不好的代码。我想换一些标签。我尝试使用String.replace、String.IndexOf等方法替换标记，但没有意义。为了实现我的目标，我想尝试修改CKEditor的sourde代码。当我使用简单图片时，没有签名/描述，我得到如下代码（浮动取决于所选选项）：

我想将其转换为：

<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>

---

你能帮我解决我的问题吗？

太长了，不能评论

这是图像还是图像2插件？这是一个巨大的变化-我确信您不想编辑CKE源代码来完成这项工作，而是侦听图像插入，然后动态编辑插入的元素。至于你可能想听的活动，看一看——那里有60个不同的活动，其中一个可能适合你

或者，你也可以制作自己的图像插件——这实际上是可行的，插件指南和系统在CKEditor中非常好。特别是如果图像可以是小部件，并且可以做一些类似于image2的拷贝的事情

---

另外，将自然块级元素（

p

和

figure

）转换为内联元素（

a

）是一个很大的语义变化-您确定要这样做吗？你肯定想要一些块级的父对象，而不是像那样直接放在身体上？尝试评估您的需求和解决方案。

我最近对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>',

这将使用lightbox clickon创建图像，但是对话框中尚未包含数据lightbox和数据标题的选项，这是一个进一步的优化，但这应该可以让您开始

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

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