CKEditor - 更改图片源

我已经为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>&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(); 
     } 
    });

来源

2011-04-08 MartinHN

+1我喜欢艰难的CKEditor的问题，虽然我不知道答案。也许@AlfonsoML会看到它，他是一名CKEditor开发人员，在这里非常活跃。 – 2011-04-08 09:47:03

让我们希望他能看到它:) – MartinHN 2011-04-08 09:50:15

值得一试的是在编辑器上触发（'改变'）'，这对我写在我自定义的TinyMCE中的作品非常有用。 – 2011-04-08 12:11:57

的图像src和链接href在CKEditor的保护，以避免浏览器的bug：

我的代码看起来是这样的还更新该自定义属性：

data-cke-saved-src

来源

2011-04-10 12:50:23 AlfonsoML

有没有什么办法可以在图像添加到图像时解除编辑器的来源？ – 2012-08-09 05:26:14

我不明白你的意思。当您使用文件浏览器将图像添加到wysiwyg的内容时，您可以通过调用editor.getData（） – AlfonsoML 2012-08-09 09:13:46

来获取HTML，从而禁用源按钮，因此无法再查看源代码。反正有重写这个吗？ – 2012-08-09 15:22:01

CKEditor - 更改图片源

回答

相关问题