Make Button State Toggle when Select Text

I have a few custom buttons that will place the selected text into a <span> element. Each button creates a span with a different id and style. When the span text is later clicked on, I would like for the corresponding button to toggle, or change its state to FCK_TRISTATE_ON.

I have searched for days in the code but I can't find this: where does fckeditor change the state of the bold button when you click on bold text. I figured I could use that as a starting point for making my functionality work. I have also searched the boards. I found a post that mentioned setting the toolbar item to ContextSensitive, and I have done that. However, this particular post suggested using this with an ExecuteNamedCommand function. I am using a custom command with a span tag instead of a <b> tag, so this may be a bit trickier.

Somewhere I need to grab the selected text, see if its element has my id, and then toggle the button if it does. Make sense?

If anybody can point me in the right direction I would really appreciate it.

Thanks!

Fri, 05/09/2008 - 15:57

fckeric

Joined: 02/05/2008

Posts: 5

Re: Make Button State Toggle when Select Text

Okay I found the first part of this - how to add the event listener. This is from one of the plugin samples:

//add code here
function FCKButton_Check()
{
   alert("hello");
   
}

//adding to fck when selection changes
FCK.AttachToOnSelectionChange( FCKButton_Check ) ;

function FCKButton_SetListeners()
{
   FCK.EditorWindow.attachEvent( 'onclick', FCKButton_Check ) ;
   
}

if ( FCKBrowserInfo.IsIE )
{
   FCK.Events.AttachEvent( 'OnAfterSetHTML', FCKButton_SetListeners ) ;
}

Fri, 05/09/2008 - 16:57

fckeric

Joined: 02/05/2008

Posts: 5

Re: Make Button State Toggle when Select Text

Okay I'm getting closer. Turns out if I want this to work properly, I need to create a different command for each button. Then in that command's GetState function, that's where I put in the code to get the selection, test if it has my span id, and then return FCK_TRISTATE_ON if it does, FCK_TRISTATE_OFF if it doesn't.

Fri, 05/09/2008 - 22:57

fckeric

Joined: 02/05/2008

Posts: 5

Re: Make Button State Toggle when Select Text

Almost done now. Turns out I didn't need the prior code I posted at all. In the GetState method of my plugin, I simply had to 1) get the selection, 2) get the parent element, 3) check if it had my id, 4) return FCK_TRISTATE_ON or FCK_TRISTATE_OFF

Here's example code for GetState:

SourceCommand.prototype.GetState=function() {
   
   var parentNode = getParent();
   var id = null;
   if(parentNode != null){
    id = parentNode.id;
   }
   
   if(id != null && id == "source"){      
      return FCK_TRISTATE_ON;         
   }   
   return FCK_TRISTATE_OFF;   
}

To get the parent worked fine in mozilla but not so much in IE because that method is looking for the type "Control", which my parent is not. So here is my getParent method:

function getParent()
{
   //works fine in mozilla, but returns nothing in ie because not a type "Control" 
   var parentNode = FCKSelection.GetParentElement();
   
   //in ie
   if(parentNode == null)
   {                        
         parentNode = FCK.EditorDocument.selection.createRange().parentElement();      
   }   
   return parentNode;   
   
}

Sun, 05/11/2008 - 23:40

kwillems

Joined: 03/02/2006

Posts: 76

Re: Make Button State Toggle when Select Text

To my opinion you can better make use of the following:

oSelection = FCK.Selection.MoveToAncestorNode( 'SPAN' );

After that you can check if oSelection exists and if it has the id you're searching for.