CKEditor 4
Tue, 10/16/2007 - 11:57
#1
julia82
julia82's picture
Joined: 16/10/2007
Posts: 13

[javascript running] in the text area, capture click

Hi all!

I'm a new user of FCKeditor and I am looking for
(1) how to run javascript into the editing area of the editor
OR (2) how to capture the event of click in any point of the editing area.

I mean: I saw several examples of the first solution in this forum of these kinds of interactions but I haven't succeed doing it :|
I give you an example of what I want to do:

  You are using <a href="http://www.fckeditor.net/">FCKeditor</a>
This is <span id="spanTHERAError1" class="rojo" onClick="alert(hola);">newText</span>


Other solution (2) could be just control the event in the whole text area and then look for the id of the precise element ... but I have neither found anything about how to capture the click event... :|
I have looked in the configuration file (I'm using the default one) but I don't think the protected source avoid my javascript to work...

Please help me!

I found something that could be relative to my problema: (a post staid without answer):http://www.fckeditor.net/forums/viewtopic.php?f=6&t=6509&p=17501&hilit=+onclick#p17501 .... except that I can't even do the first step!)

First step of the other post:

    You are using <a href="http://www.fckeditor.net/">FCKeditor</a></em><strong id="input1" onclick="alert('aaa');">HI</strong>


Thanks to all! :mrgreen:

Julia

Top
Tue, 10/16/2007 - 12:57
julia82
julia82's picture
Joined: 16/10/2007
Posts: 13

Re: [javascript running] in the text area, capture click

Hello!

I'm still Julia.
I have succeedeed to capture the event of click by capturing the one of the whole document of the editor.

I give you he the successful code:


function onClickCapture ()
{
alert ("onClickCapture");
}

function FCKeditor_OnComplete ( editorInstance ) {
doc = editorInstance.EditorDocument;
doc.onclick = onClickCapture;
}


The code has to be inserted in the page that creates the editor in a javascript heading.

I insist that it's a "clean" solution because both behaviours are going to be running: the specific behaviour in the function onClickCapture, and the default one (for example detect if we are in bold tag).

Thanks to all.

Julia
Top
Tue, 10/16/2007 - 13:41
julia82
julia82's picture
Joined: 16/10/2007
Posts: 13

Re: [javascript running] in the text area,event.srcElement ?

Hello,

well it works but I can't succeed to get the source of the event...
Please would you know how to do?

Julia
Top
Tue, 10/16/2007 - 15:35
lake
lake's picture
Joined: 01/08/2007
Posts: 96

Re: [javascript running] in the text area, capture click

//Check if browser is IE here
var elem
if (IE) 
     elem = window.event.srcElement;
else
     elem = this;

This should work to get the event element. hope this helps. By the way there are several js libraries that may be able to help you. Check out http://www.jquery.com. if you have this you can use:

jQuery.browser.msie //to test for IE
jQuery(this); //to get the src of the event

Makes it much easier, although I think the FCK library has some of the same functionality built into it.

Top
Tue, 10/16/2007 - 16:21
julia82
julia82's picture
Joined: 16/10/2007
Posts: 13

Re: [javascript running] in the text area, capture click

Hello and thanks lake :mrgreen: !

Well I've tried everything I'm putting down (commented):

function onClickCapture
{
//element = event.srcElement;
//element = document.event.srcElement;
//element = doc.event.srcElement;
  //element = window.event.srcElement;
element = this.srcElement;
//var event = doc.frames[0].objContent.DOM.parentWindow.event;
  //var event = doc.frames[0].objContent.DOM.parentWindow.event;
/* editor_frame = document.getElementById(editorname+'___Frame');
editor_source = editor_frame.contentWindow.document.getElementById('eEditorArea');
editor_source.contentWindow.document.body.innerHTML += 'some text';*/
}


... and nothing has worked! All give me that even is null or undefined :(

The solution with doc.frames[0].objContent.DOM.parentWindow.event (that comes from another post) seems to be old.

I don't know what to do.

Thanks for your help!

Julia

Top
Tue, 10/16/2007 - 16:39
lake
lake's picture
Joined: 01/08/2007
Posts: 96

Re: [javascript running] in the text area, capture click

ah, to be honest I tried to capture a click event in the text area but was unsuccessful. I ended up capturing the click on the body element (captured all clicks on toolbar buttons for what I needed). Just out of curiosity what do you need this for?
Top
Tue, 10/16/2007 - 19:05
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3737

Re: [javascript running] in the text area,event.srcElement ?

julia82 wrote:Hello,

well it works but I can't succeed to get the source of the event...
Please would you know how to do?

Julia

You almost got it right the first time, but you didn't check for the event:
W3C compliant browsers will send it as the parameter to your function, and IE..., well, IE is IE.

function onClickCapture (e)
{
if (!e) e=window.event;
alert ("onClickCapture");
}

function FCKeditor_OnComplete ( editorInstance ) {
doc = editorInstance.EditorDocument;
doc.onclick = onClickCapture;
}
Top
Wed, 10/24/2007 - 09:58
julia82
julia82's picture
Joined: 16/10/2007
Posts: 13

Re: [javascript running] in the text area,event.srcElement ?

Hello! and thanks Alfonsomi!

Unfortunately it neither works... :(
For now the project is "in pause", so I stop looking for a solution.
I work with Linux and an emulator of Internet Explorer 6. With our former editor ,that way to capture the event was working... (the one where I don't have the event e passed in parameter)
I "put" that post in "pause", and will go on when the project starts again... (but it's not solved).

Thanks to all.

And if anybody want to contribuate...

Julia

Top
Wed, 10/24/2007 - 16:21
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3737

Re: [javascript running] in the text area, capture click

This code works in all the browsers:
function onClickCapture (e)
{
   if (!e) e=window.event;
   var elmt = e.target || e.srcElement;

   alert (elmt.nodeName);
}

function FCKeditor_OnComplete ( editorInstance ) {
   
   var doc = editorInstance.EditorDocument.body;
   addEvent( doc, "click", onClickCapture ) ;
}

function addEvent(obj, evType, fn, useCapture){
  if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    return true;
  } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else {
    return false;
  }
}
Top
Wed, 01/02/2008 - 13:26
julia82
julia82's picture
Joined: 16/10/2007
Posts: 13

Re: [javascript running] in the text area, capture click

Happy new year to everybody!

THANKS A LOT alfonsomi, it works!!!!

Post solved.
Top
Fri, 08/08/2008 - 16:54
saul11
saul11's picture
Joined: 19/06/2006
Posts: 633

Re: [javascript running] in the text area, capture click

Works nice indeed, but I had to use 'mouseup' because the click event wouldn't fire onclick of an object in the editor, eg. an image; mouseup does. Mousedown fires too, but I guess the Selection won't be updated yet then...
Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check