我已经为CKEditor制作了一些自定义功能。总之,它显示了一个带有5个链接的div标签,用于小型,中型,大型X大型和原始大小。CKEditor - 更改图片源
当我单击链接时,它将图像的SRC属性更改为正确的大小。
它的作品,但它不会坚持回编辑。这就像我通过点击事件目标获得的图像,不是源代码的一部分。
如何在编辑器中操作元素时更改源代码? (在复印时,拖动或有时甚至只是加载内容),所以你必须
$(target).ckeditor(function (editor) {
$(this.document.$).bind("click", function (event) {
var target = $(event.target);
if (target.is("img")) {
var p = $("<div contenteditable='false' class='image-properties'>" + Milkshake.Resources.Text.size + ": <a class='sizeLink' href='#size1Img'>S</a> <a class='sizeLink' href='#size2Img'>M</a> <a class='sizeLink' href='#size3Img'>L</a> <a class='sizeLink' href='#size4Img'>XL</a> <a class='sizeLink' href='#size5Img'>Org.</a></div>");
p.css("top", target.position().top);
var regex = new RegExp(/(size\d{1}img)/i);
var match = regex.exec(target.attr("src"));
if (match != null) {
var imgSrize = match[0];
p.find("a[href=#" + imgSrize + "]").addClass("selected");
}
p.delegate("a", "click", function (e) {
var link = $(e.target);
if (!link.is(".selected")) {
$(".selected", link.parent()).removeClass("selected");
link.addClass("selected");
var imageSrc = target.attr("src");
imageSrc = imageSrc.replace(/(size\d{1}img)/i, link.attr("href").substring(1));
target.attr("src", imageSrc);
target.css("width", "");
target.css("height", "");
}
e.preventDefault();
});
p.insertAfter(target);
} else if (!target.is("div.image-properties")) {
$("div.image-properties", target.parent()).remove();
}
});
+1我喜欢艰难的CKEditor的问题,虽然我不知道答案。也许@AlfonsoML会看到它,他是一名CKEditor开发人员,在这里非常活跃。 – 2011-04-08 09:47:03
让我们希望他能看到它:) – MartinHN 2011-04-08 09:50:15
值得一试的是在编辑器上触发('改变')',这对我写在我自定义的TinyMCE中的作品非常有用。 – 2011-04-08 12:11:57