Question

我使用CKEditor for ASP。在我的网站中使用增强图像的NET。当我插入图像时，我得到的代码对我不好。我想替换一些标签。我尝试使用String.Replace，String.IndexOf等方法替换标签，但它没有使用sens。我想尝试修改CKEditor的sourde代码以实现我的目标。当我使用简单的图片，没有签名/描述时，我得到这样的代码（float取决于所选的选项）：

<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源来执行此操作，而是监听图像插入，然后动态编辑插入的元素。至于您可能想听的事件，请查看the awesome CKE docs - 那里有60个不同的事件，其中一个可能适合您。

或者你可以制作自己的图片插件 - 它实际上非常可行，插件指南和系统在CKEditor中非常好用。特别是如果图像可以是小部件并且像图像副本那样做。

此外，将自然块级元素（p和figure）转换为内联元素（a）是 big 语义更改 - 你是你确定要这样做吗？当然你想要一些块级父级而不是直接将它们放在身体上吗？尝试评估您的要求以及解决方案。

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创建图像，但数据灯箱和数据标题的选项尚未包含在对话框中，这是一个进一步的优化，但这应该可以帮助您入门

编辑CKEditor插入的图像

2 个答案: