Removing Styles

Hello...

I implemented version 1.6 a month or so ago. We rely mostly on the styles and don't use font tags at all.

I have made a slight modification to the doStyle command in fck_action.js. I changed the following line:

var oFont = document.createElement("FONT") ;

To

var oFont = document.createElement("SPAN") ;

because we wanted the styles to be span tags instead of Font tags.

We are having issues removing styles from items.
For example, if I apply a style to a line of text, the only way to remove the style is to view the source and manually remove the span tags.

I changed the above line back to Font to see if that helped, but it didn't.

I checked out the Remove Format button which calls DECMD_REMOVEFORMAT, but that does not seem to do anything for class tags.

I did notice a cleanAndPaste function in fck_action.js, but that seems to only be called when pasting in from Word.

My questions is, is there a way to create a new button that would call something similar to the cleanAndPaste function which would remove all spans, classes, etc from the selected text within the editor?

I tried adding a new line to the fck_toolbaritems.js file as follows:

TBI.prototype.RemoveStyle = new TBButton("RemoveStyle", lang["RemoveStyle"], "cleanAndPaste(this)", TBCMD_CUSTOM) ;

I then added the item to fck_toobar.js, and I made a copy of the remove formatting button and called it button.removestyle.gif to get it to show in the toolbar.

But this didn't really do anything.

What I want to do is pretty much look at the selected text and remove any spans, classes, etc (pretty much reuse the cleanAndPaste function), but i cannot seem to figure out how to get it to work...

Any help/suggestions would be much appreciated!!!

Thank you...
Kevin

Fri, 06/18/2004 - 11:28

ig_dev

Joined: 28/02/2006

Posts: 6

RE: Removing Styles

I think i figure it out...

First I added the following line to /js/fck_toolbaritems.js:

TBI.prototype.RemoveStyle = new TBButton("RemoveStyle" , lang["RemoveStyle"] , "doStyle(this)" , TBCMD_CUSTOM) ;

It calls doStyle. It passes (this) --which is nothing-- and command.value shows up in the doStyle function as 'undefined'

I then modified the doStyle function in the following way:

function doStyle(command)
{
var oSelection = objContent.DOM.selection ;
var oTextRange = oSelection.createRange() ;

if (oSelection.type == "Text")
{
//IG: Added this if statement to support removing styles KH 6-17-2004
if (command.value == undefined)
{
//set html to the selected text
var html = oTextRange.htmlText ;
// Remove all SPAN tags
html = html.replace(/<\/?SPAN[^>]*>/gi, "" );
// Remove Class attributes
html = html.replace(/<(\w[^>]*) class=([^ |>]*)([^>]*)/gi, "<$1$3") ;
// Remove Style attributes
html = html.replace(/<(\w[^>]*) style="([^"]*)"([^>]*)/gi, "<$1$3") ;
// Remove Lang attributes
html = html.replace(/<(\w[^>]*) lang=([^ |>]*)([^>]*)/gi, "<$1$3") ;
// Remove XML elements and declarations
html = html.replace(/<\\?\?xml[^>]*>/gi, "") ;
// Remove Tags with XML namespace declarations: <o:p></o:p>
html = html.replace(/<\/?\w+:[^>]*>/gi, "") ;
// Replace the  
html = html.replace(/ /, " " );
// Transform <P> to <DIV>
var re = new RegExp("(<P)([^>]*>.*?)(<\/P>)","gi") ; // Different because of a IE 5.0 error
html = html.replace( re, "<div$2</div>" ) ;
//paste the new html back into the window
oTextRange.pasteHTML( html ) ;
}
else
{
decCommand(DECMD_REMOVEFORMAT);
if (!FCKFormatBlockNames) loadFormatBlockNames() ;
doFormatBlock( FCKFormatBlockNames[0] ); // This value is loaded at CheckFontFormat()

//var oFont = document.createElement("FONT") ;
// IG: Changed this to Span instead of font KH 05112004
var oFont = document.createElement("SPAN") ;
oFont.innerHTML = oTextRange.htmlText ;

var oParent = oTextRange.parentElement() ;
var oFirstChild = oFont.firstChild ;

if (oFirstChild.nodeType == 1 && oFirstChild.outerHTML == oFont.innerHTML &&
(oFirstChild.tagName == "SPAN"
|| oFirstChild.tagName == "FONT"
|| oFirstChild.tagName == "P"
|| oFirstChild.tagName == "DIV"))
{
oParent.className = command.value ;
}
else
{
oFont.className = command.value ;
oTextRange.pasteHTML( oFont.outerHTML ) ;
}
}
}
else if (oSelection.type == "Control" && oTextRange.length == 1)
{
var oControl = oTextRange.item(0) ;
oControl.className = command.value ;
}

command.selectedIndex = 0 ;

SetFocus();
}

So, if the command.value is undefine (which it is when the new button is clicked, then it goes into my new IF statement logic. The majority of the logic inside the if statement was stolen directly from the cleanAndPaste function later in the file.

This seems to be working for me...

If anyone else has a better/more eloquent way of doing, i would love hear about it...

Thanks again....
Kevin

Mon, 06/28/2004 - 09:29

moztop

Joined: 28/06/2004

Posts: 5

RE: Removing Styles

Thanks for posting this code, I have implemented it as per your instructions. It works ok, until you try and remove the styles, if you have more than two on the page, when you press "remove styles" it removes the span tag but then nests it within the previous span. When you try and remove the sttyle from this span it ignores you.

Mon, 06/28/2004 - 11:58

ig_dev

Joined: 28/02/2006

Posts: 6

RE: Removing Styles

hmm...

I have not given it too much testing. And we have noticed some other odd behaviours. My task was to get it working just enough for our client who said they wanted to use the editor and needed to be able to remove the styles. So, i got it working just enough....and did not try border cases.

Unfortunately, I have been taken off this part of the project for now and am focusing on something else. If i have time, i will try to get it working better...but might not be able to get to if for another month or two.

If i do happen to get back to this...i will make sure to post it here.

If you find the answer, please also post it...

Thanks and sorry for the buggy-code!