在带有Image2插件的CkEditor 4.3中，更改图像src的正确方法是什么？

Question

正如标题所说，我正在使用基于完整包的CkEditor 4.3版本，其中还包括Image2插件 （使用CkBuilder构建，以便自动解决所有依赖关系）。

我需要的是以编程方式（使用，如果需要，还使用jQuery）更改图像的src属性。

使用经典的Image插件 ，我使用以下代码执行此操作：

var imgToBeReplaced = editor.document.findOne("img#myImg");
imgToBeReplaced.setAttribute("src", newSrc);

因为我需要确保编辑器对象的getData（）方法返回正确的数据，我还要执行以下操作（了解更多信息： CKEditor - 更改图像源 ）：

$(imgToBeReplaced.$).attr("data-cke-saved-src", newSrc);

当我使用Image2插件执行此操作时，图像被正确更改，但之后，我无法调整它的大小，我无法访问图像属性（双击图像，也不使用打开右侧的上下文菜单 -单击图像，因为选项“属性”不再存在。

所以，问题是：如何才能正确地更改src （和data-cke-saved-src ）属性，而不会失去更改图像属性的可能性？

Answer 1

现在使用小部件 ，您唯一需要担心的是

• 获取适当的小部件实例
• 调用setData()方法

至于你需要这种特殊情况

// You need to have CKEDITOR.editor instance, here i will pick it from instances property.
var editor = CKEDITOR.instances.editor1,
    // All widgets instances are stored here, we will iterate on top of them.
    widgets = editor.widgets.instances,
    curWidget,
    i;

for ( i in widgets ) {
    curWidget = widgets[ i ];
    // Ensure that image is a part of widget, and src matchs our needs.
    if ( curWidget.definition.name == 'image2' && curWidget.parts.image.getAttribute( 'src' ) == 'assets/image1.jpg' ) {
        // Update src attribute.
        curWidget.setData( 'src', 'http://upload.wikimedia.org/wikipedia/en/1/18/Unicorn-head-circle-2.png' );
    }
}

这将是更新image2 src的正确方法 - 所有的东西都将由image2插件本身处理。