Question

我为CKEditor制作了一些自定义功能。简而言之，它显示了一个带有5个链接的div标签，适用于小型，中型，大型X大型和原始大小。

单击链接时，它会将图像的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>&nbsp;<a class='sizeLink' href='#size2Img'>M</a>&nbsp;<a class='sizeLink' href='#size3Img'>L</a>&nbsp;<a class='sizeLink' href='#size4Img'>XL</a>&nbsp;<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();
        }
    });

Answer 1

src图像和href链接在CKEditor中受到保护，以避免浏览器错误（复制，拖动或有时甚至只是加载内容时），因此您还必须更新此自定义属性：

data-cke-saved-src

CKEditor - 更改图像源

1 个答案: