CKEditor -更改图像源
CKEditor - Change image source
我已经为CKEditor做了一些自定义功能。简而言之,它显示了一个带有5个链接的div标签,分别为Small, Medium, Large X-Large和Original size。
当我点击链接时,它将图像的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();
}
});
图片的src
和链接的href
在CKEditor中受到保护,以避免浏览器错误(当复制,拖动或有时甚至只是加载内容时),所以你必须更新这个自定义属性:
data-cke-saved-src
相关文章:
- 删除CKEditor'中的htmlPreview;s图像插件
- CKEditor中没有从计算机上传图像的选项
- 如何在CKEditor中为图像添加ID
- 如何设置与CKEditor一起使用的图像路径
- 当我们单击按钮时,如何在 ckeditor 中插入图像
- 当我使用 CKEditor CDN 时,如何从桌面上传 CKEditor 中的图像
- 在CKEditor中插入HTML不仅适用于图像
- CKEDITOR图像对话框大小
- CKEditor:在插件“图像”的对话框窗口中设置输入字段的值
- CKEditor不显示图像数据
- 在ckeditor中是否有用于上传图像的PHP插件
- 让ckeditor在源代码中保留一个图像映射
- CKEditor只在编辑器中正确插入图像,但在提交后不会在网页上显示图像
- CKEditor-“图像属性”对话框为空
- 使用spring将图像url添加到ckeditor
- CKeditor setData()方法正在省略图像
- 如何在从CKEDITOR将图像源保存在数据库中时使用绝对URL
- 如何找到文本和替换它的图像在CKeditor
- CKEditor - CKFinder不会在上传图像后自动创建缩略图
- CKeditor添加图像属性高级选项卡