Question

嘿，我正在为一个简单的CKEditor插件工作，我不会坚持使用JavaScript，所以这是我的问题。

我上传了一张图片并插入了一个对话框，产生了类似的内容。

<div class="float-right image">  
<img alt="alt-text" src="img.jpg" />   
<span class="caption">Caption</span>  
</div>

像魅力一样工作，但一旦我插入，我希望能够编辑它。这样做我可以通过

获取alt属性和图像的src

var elem = this.getParentEditor().getSelection().getSelectedElement();

使用getAttribute（'...'）。但我无法弄清楚如何触及，标题和div。

如果你能帮助我，我会很高兴的。提前谢谢。

BTW：是否有可能在CKEditor的插件中使用jquery？

以下是解决方案：

所以我最终想到了，感谢这里的所有帮助。在对话框部分：

onShow : function()
{
elem = this.getParentEditor().getSelection().getSelectedElement();
var span = elem.getNext();
var parent = span.getParent();
}

这为我提供了在我再次打开对话框后填写对话框所需的所有内容。

提交我需要的所有内容，以了解如何更改当前选择。这样的工作方式如下：

onOk:
function()
    {
editor.getSelection().selectElement(editor.getSelection().getSelectedElement().getParent());
editor.insertHtml('<div ...</div>');
}

谢谢大家，我今天才开始深入研究CKEditor插件，我已经有了两个不错的插件。

Answer 1

使用CKEditor API，您可以使用.getNext()

Answer 2

是的，你可以在CKEditor插件中使用jQuery，只要你不打算分发插件（其他人可能没有jQuery），在这种情况下你的解决方案会变成：

$(elem).next('span')和$(elem).prev('div')

如果您不想使用jQuery，则需要.nextSibling和.previousSibling

但请注意，下一个和上一个兄弟节点通常都是textNodes，具体取决于您所使用的浏览器。因此，要获得跨度，您需要一个循环：

function getNextSibling(node, type){
    while((node = node.nextSibling) && (node.nodeName != type));
    return node;
}

getNextSibling(elem, 'SPAN');

Answer 3

有Element.nextElementSibling，IE9 +，Fx3.5 +，Op，Saf和Chrome支持（过去三年的dunno版本，但已经有一段时间了。）

Javascript：获取当前元素的兄弟[CKEditor所需]

以下是解决方案：

3 个答案: