CKEditor - 更改图像源 [英] CKEditor - Change image source

问题描述

我已经为CKEditor做了一些自定义功能。总之，它显示了一个带有5个链接的div标签，用于小，中，大X大和原始大小。

I have made some custom functionality to the CKEditor. In short, it shows a div tag with 5 links, for Small, Medium, Large X-Large and Original size.

当我点击链接时，

它可以工作，但不会永久保存到编辑器中。这就像Image通过点击事件目标，不是源代码的一部分。

It works, but it doesn't persist back to the editor. It's like the Image i get through the click event target, is not part of the Source code.

如何更改源代码，当操作与编辑器？

How can I change the Source code, when manipulating with the elements in the editor?

我的代码如下所示：

$(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();
        }
    });

推荐答案

src 的图像和链接的 href 链接被保护在CKEditor，以避免浏览器错误（当复制，拖动，有时甚至只是加载内容），所以你必须更新此自定义属性：

The src of images and href of links are protected in CKEditor to avoid browser bugs (when copying, dragging or sometimes even just loading the content), so you must update also this custom attribute:

data-cke-saved-src

这篇关于CKEditor - 更改图像源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！