Question

Hey, I am working on a simple Plugin for CKEditor, I am not to firm with JavaScript, so here is my problem.

I upload an image and insert it with a dialog, producing something like this.

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

Works like a charm, but once i is inserted I want to be able to edit it.
Doing so I can get the alt attribute and the src of the image via

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

and working with getAttribute(‘…’). But I can not figure out how to reach, the caption and the div.

I would be very happy if you could help me. Thanks in advance.

BTW: Is there a possibility to use jquery within a plugin for CKEditor?

Heres the solution:

So what I came up with in the end, thanks to all the help here.
In the dialog part:

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

this gives me all the stuff I need to fill into the dialog once I open it again.

to submit everything I needed to find out how to change the current selection. This works like this:

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

Thank you guys, I only started digging into the CKEditor Plugins today and already I got two nice ones.

Answer 1

With the CKEditor API you can use .getNext()