He hecho algunas funciones personalizadas para el CKEditor. En resumen, muestra una etiqueta div con 5 enlaces, para tamaño pequeño, mediano, grande X-grande y original.CKEditor - Cambiar fuente de imagen
Cuando hago clic en los enlaces, cambia el atributo de SRC de la imagen al tamaño correcto.
Funciona, pero no persiste en el editor. Es como si la Imagen que obtengo a través del objetivo del evento Click, no es parte del código fuente.
¿Cómo puedo cambiar el código fuente, al manipular con los elementos en el editor?
Mi código es el siguiente:
$(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 me gusta CKeditor preguntas difíciles, aunque no sé la respuesta. Tal vez @AlfonsoML lo verá, es un desarrollador de CKEditor y muy activo aquí. –
Esperemos que lo vea :) – MartinHN
Puede valer la pena intentar 'trigger ('change')' en el editor, esto funcionó para mí en una pieza personalizada de TinyMCE que escribí. –