Restrictive (clean) paste in FCKEditor?

Hello,

I'm using FCKEditor for one of my projects, but it allows too much when pasting. I'd like it only to paste bold, italics, underlined and maybe title levels and that's all.

The closest solution I've found is to use the ForcePasteAsPlainText setting, but it works in an ugly way, by opening a new window (thus almost negating the need for the editor). Moreover, bold, italics, underlined and title levels can be useful. In my case, hyperlinks, font types and sizes, images, etc. are a major nuisance.

I'll take any suggestion. My idea right now is to clean the output in PHP after the text is saved, but it is not WYSIWYG anymore.

Cheers,
Stéphane
CPL593HAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

longbloke69Commented:
Why not paste into a hidden div, do the cleanup using JS and regex and then output into the wysiwyg editor?
0
CPL593HAuthor Commented:
I do not think such a solution would be transparent for the user, but if you have an idea on how to do so, I'll take it.

Cheers,
Stéphane
0
longbloke69Commented:
I haven't built such a solution, but it would be possible to do a manual clean, you would just need to find a way of getting the data into the external div. The user would not need to be included in the process, other than hitting the button to paste. I'm thinking a basic "div.innerHTML = PastedData", then clean up pasted data and copy and paste (using the fck's in-built functions, i am sadly not versed with fck's features/code) back formatted html "paste(div.innerHTML)".

That's the concept anyway. All this would obviously happen in the blink of an eye, and the user would not even need to know it had left the wysiwyg editor.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

CPL593HAuthor Commented:
It looks like  EE's text input box does exactly what you describe. However, I'm not competent enough in Javascript to write it. I'd take a link to a site explaining how to clean the input using JS regexes.

Cheers,
Stéphane
0
sh0eCommented:
Bind onPaste and modify the HTML before paste with some RegEx.
Does this need to work in FireFox?
0
CPL593HAuthor Commented:
Yes, all my projects must be IE6+ and all other Mac and PC browser (I test on IE's, FF, Safari and Opera) and can not rely on client-side programming, except for JavaScript of course (no Flash, ActiveX, etc.)
0
sh0eCommented:

function FCKeditor_OnComplete( editorInstance )
{
    editorInstance.Events.AttachEvent( 'OnPaste', cleanit ) ;
}
 
var counter = 0 ;
var ei;
var si;
function cleanit( edI )
{
    edI.ResetIsDirty();
	ei = edI;
	si = setInterval('cleanit1()', 500);
	return true;
}
function cleanit1(){
	if(ei.IsDirty()){
	    var str = ei.GetHTML().replace(/(<(strong|[pP]|[bB]|[iI]|[hH][0-9])\b[^>]*>(.*?)<\/\2>)|<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\4>/g, '$1$5' );
		ei.SetHTML(str);
		clearInterval(si);
	}
}

Open in new window

0
CPL593HAuthor Commented:
Wow sh0e, almost perfect. It still has two problems that are assume are minor: it allows images to be pasted, divs and HTML links too, but in a strange fashion (one line break, the link, another line break).

Now I'm sure that it's just a matter of tweaking the regexp, but JS regexpes are Chinese to me.

Cheers,
Stéphane
0
numberkruncherCommented:
The following link describes a way in which you can actually emulate the onpaste event in FireFox.

http://www.actsascommunity.com/snippets/6

I implemented this functionality last week and it works really well.
0
sh0eCommented:

function FCKeditor_OnComplete( editorInstance )
{
    editorInstance.Events.AttachEvent( 'OnPaste', cleanit ) ;
}
 
var counter = 0 ;
var ei;
var si;
function cleanit( edI )
{
    edI.ResetIsDirty();
        ei = edI;
        si = setInterval('cleanit1()', 1000);
        return true;
}
function cleanit1(){
        if(ei.IsDirty()){
            var str = ei.GetHTML().replace(/<(?!div|p|strong|b|u|i|h[0-9])([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/ig, '$2' );
                ei.SetHTML(str);
                clearInterval(si);
        }
}

Open in new window

0
CPL593HAuthor Commented:
sh0e: even better, but it still allows images and hyperlinks to be pasted (information that I do not want in my software, which is used for strict text analysis - only exceptions being the usual suspects: bold, italics, underlined, title levels and maybe ordered/unordered lists - tbd later).

From my poor understanding of JS's regexpes, i thought that with your script, only div|p|strong|b|u|i|h[0-9] would be allowed, which looks nice. How do img's and a's (and maybe others that I have not checked) pass through the filter?

Stéphane
0
sh0eCommented:
Okay here we go.  If there are still problems can you copy/paste source (of the HTML produced)?
function FCKeditor_OnComplete( editorInstance )
{
    editorInstance.Events.AttachEvent( 'OnPaste', cleanit ) ;
}
 
var counter = 0 ;
var ei;
var si;
function cleanit( edI )
{
    edI.ResetIsDirty();
        ei = edI;
        si = setTimeout('cleanit1()', 1000);
        return true;
}
function cleanit1(){
        if(ei.IsDirty()){
            var str = ei.GetHTML().replace((</(?!\/?(strong|b|u|i|h[0-9])\b)[^>]*>)/ig,'');
            ei.SetHTML(str);
        }
        else setTimeout('cleanit1()', 1000);
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CPL593HAuthor Commented:
Gives me an error in Firefox:

Error: syntax error
Source File: http://192.168.168.128/test.php
Line: 41, Column: 44
Source Code:
            var str = ei.GetHTML().replace((</(?!\/?(strong|b|u|i|h[0-9])\b)[^>]*>)/ig,'');

The error is located at the ((.

As I've said, I don't understand JS's regexpes enough to fix the error. Nevertheless, I'd like to have comment not on the code itself  it's pretty clean  but on the regexp so I understand what it does and how it does it.

Stéphane



0
sh0eCommented:
Made a typo.
Matches '<', optional '/', the word strong|b|u..etc, *>
var str = ei.GetHTML().replace(/(<(?!\/?(strong|b|u|i|h[0-9])\b)[^>]*>)/ig,'');

Open in new window

0
sh0eCommented:
?! tells it to fail match if it finds it
0
CPL593HAuthor Commented:
Many thanks! You really should publish this hint on FCK's forum, I've read so many times that what it does is impossible!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.