Jump to content

Designmode


djp1988

Recommended Posts

Hi all, I have an iframe which i allow my members to type in some content. When i submit this I retrieve the html and I start sorting through it with a php script until it's quite clean and then store it in my database.The problem I have is that different browsers produce different HTML, for example, safari uses <div> for each line break, Firefox uses <br>...But my greatest problem is that, if someone selects and copies some content from another source, say a different website, and pastes it into the iframe, the paste preserves the content style, so.I only want people to be able to do simple styling, in fact, I only want them to be able to do bold text or italic text, other then regular text.So if someone is pasting an article they've already done on a blog somewhere... then it means he ends up with content which has different sizes, bold, italic, header tags, margins... etc...How can I avoid people pasting? Or better still can I disable the style when pasting?

Link to comment
Share on other sites

You can use PHP's strip_tags function to remove tags except the ones you want to allow. In order to remove style information, you'll need to use a regular expression to find and replace class and style attributes on the tags.

Link to comment
Share on other sites

Yes, with a preg_replace, I've found this one which is good, but I would like to preserve any of the following css rules:font-weight:font-style:as i want people to make parts of the text in bold and/or italichere is the preg:

$text = preg_replace("/<(.+?)(style=([\"']).*?\\3)(.*?)>/i", '<\1\4>', $text);

Link to comment
Share on other sites

So you'll need to modify the expression to look at the text inside the style attribute and replace anything that doesn't start with what you want. That's not a very easy expression to make, there are several things to take into account. It would have to correctly parse all of these:style="font-weight: xxx;"style="font-weight: xxx"style="font-style: yyy;"style="font-style: yyy"style="font-weight: xxx; font-style: yyy;"style="font-weight: xxx; font-style: yyy"style="font-weight:xxx;font-style:yyy"style="abc: 123; font-weight: xxx; font-style: yyy; xyz: 123;"So there's optional whitespace, there might be other properties before or after or in the middle of the other two, the ending semicolon is optional, etc. Sounds like regular expression research is in order.

Link to comment
Share on other sites

Easier still, I could maybe just disable css when using designMode, currently I am doing this:

	iframe = document.getElementById("editme").contentDocument || document.getElementById("editme").contentWindow.document;	if(iframe.designMode){		iframe.designMode = 'on';		iframe.execCommand("styleWithCSS", false, null);	}

The styleWithCSS does exist and a command, but maybe I'm using it in the wrong way, if I could get it to style with font tags and <b> or <strong> and <i> or <em> then I could just use strip_tags and include those tow with the allowed tags...How and at what point should I call the styleWithCSS command?

Link to comment
Share on other sites

It's alright I think I've stuck gold, you need to use it as so:

iframe.execCommand("styleWithCSS", false, false);

Both parameters of that command must be false, and the bold/italic generates either a <i> and <b> tag, or a <EM>/<STRONG> tag (opera, for some reason it's in uppercase...).However I am surprised firefox is producing old html tags, but maybe it's just the lack of use of this javascript command...

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...