upload a image and insert directly into CKEditor

19 views
Skip to first unread message

Tapan Ghia

unread,
Nov 29, 2011, 2:43:32 AM11/29/11
to gwt-ckeditor
Hi,

I am looking for a functionality to insert HTML tags (for now an img
tag) into ckeditor, at the current cursor position. I am trying to do
this in the following way:

CKEDITOR.instances['instanceName'].insertHTML('&lt; img src="<your
image"/&gt;');

as i found on forums.
Reference:
http://stackoverflow.com/questions/2652267/upload-a-image-and-insert-directly-into-ckeditor
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.instances

The way i am trying to use this with GWT : (in a JSNI method)
private static native void validateCKEditorInstances() /*-{
var allInstances = CKEDITOR.instances
for ( var i in allInstances ) {
alert("instance found");
}
}-*/;

It throws me a JavaScriptException,
com.google.gwt.core.client.JavaScriptException: (ReferenceError):
CKEDITOR is not defined


How can i use namespace CKEDITOR in my jsni methods??

Thanks


Tapan Ghia

unread,
Nov 29, 2011, 7:41:27 AM11/29/11
to gwt-ckeditor
Hi,

When i run this function in Firefox console, it works:
function testF() { var allInstances = CKEDITOR.instances; for(var i in
allInstances) {ckeditor = allInstances[i]; ckeditor.insertHtml("This
is inserted HTML"); }}

while when i add the same to a jsni method, it throws me the same
exception mentioned above:


com.google.gwt.core.client.JavaScriptException: (ReferenceError):
CKEDITOR is not defined


On Nov 29, 12:43 pm, Tapan Ghia <tapan.g...@gmail.com> wrote:
> Hi,
>
> I am looking for a functionality to insert HTML tags (for now an img
> tag) into ckeditor, at the current cursor position. I am trying to do
> this in the following way:
>
> CKEDITOR.instances['instanceName'].insertHTML('&lt; img src="<your
> image"/&gt;');
>
> as i found on forums.

> Reference:http://stackoverflow.com/questions/2652267/upload-a-image-and-insert-...http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.instances

Tapan Ghia

unread,
Nov 29, 2011, 8:32:15 AM11/29/11
to gwt-ckeditor
Got it working.. :) The following code works. Figured it out while
reading these lines from gwt jsni tutorial:

'Note that the code did not reference the JavaScript window object
directly inside the method. When accessing the browser's window and
document objects from JSNI, you must reference them as $wnd and $doc,
respectively. Your compiled script runs in a nested frame, and $wnd
and $doc are automatically initialized to correctly refer to the host
page's window and document.'

private static native void validateCKEditorInstances(JavaScriptObject
jso) /*-{
alert($wnd.CKEDITOR.version);
var allInstances = $wnd.CKEDITOR.instances;


for(var i in allInstances) {
ckeditor = allInstances[i];

ckeditor.insertHtml("This is newly inserted HTML");
}
}-*/;


On Nov 29, 5:41 pm, Tapan Ghia <tapan.g...@gmail.com> wrote:
> Hi,
>
> When i run this function in Firefox console, it works:
> function testF() { var allInstances = CKEDITOR.instances; for(var i in
> allInstances) {ckeditor = allInstances[i]; ckeditor.insertHtml("This
> is inserted HTML"); }}
>
> while when i add the same to a jsni method, it throws me the same
> exception mentioned above:
> com.google.gwt.core.client.JavaScriptException: (ReferenceError):
> CKEDITOR is not defined
>
> On Nov 29, 12:43 pm, Tapan Ghia <tapan.g...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Hi,
>
> > I am looking for a functionality to insert HTML tags (for now an img
> > tag) into ckeditor, at the current cursor position. I am trying to do
> > this in the following way:
>
> > CKEDITOR.instances['instanceName'].insertHTML('&lt; img src="<your
> > image"/&gt;');
>
> > as i found on forums.
> > Reference:http://stackoverflow.com/questions/2652267/upload-a-image-and-insert-...
>

Reply all
Reply to author
Forward
0 new messages