gpt4 book ai didi

javascript - 在带有 Image2 插件的 CkEditor 4.3 中,更改图像 src 的正确方法是什么?

转载 作者:行者123 更新时间:2023-12-02 17:59:03 24 4
gpt4 key购买 nike

正如标题所示,我使用的是 CkEditor 4.3 的版本,基于完整包,还包括 Image2 plugin (使用 CkBuilder 构建,以便自动解决每个依赖项)。

我需要的是以编程方式更改图像的 src 属性(如果需要,还可以使用 jQuery)。

同经典Image plugin ,我用以下代码做到了这一点:

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

因为我需要确保编辑器对象的 getData() 方法返回正确的数据,所以我还执行了以下操作(了解更多信息: CKEditor - Change image source ):

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

当我使用 Image2 plugin 执行此操作时,图像已正确更改,但之后,我无法调整其大小,也无法访问图像属性(既不能双击图像,也不能使用右键单击图像打开的上下文菜单,因为该选项“属性”不再存在)。

所以,问题是:如何正确更改 src (和 data-cke-saved-src)属性,而不失去以下可能性:更改图像属性?

最佳答案

现在有了小部件,您唯一需要担心的是

  • 获取正确的小部件实例
  • 调用 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 插件本身处理。

关于javascript - 在带有 Image2 插件的 CkEditor 4.3 中,更改图像 src 的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20720988/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com