?
Solved

Restrictive (clean) paste in FCKEditor?

Posted on 2008-10-22
16
Medium Priority
?
1,159 Views
Last Modified: 2013-11-11
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
0
Comment
Question by:CPL593H
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 2
  • +1
16 Comments
 

Expert Comment

by:longbloke69
ID: 22775424
Why not paste into a hidden div, do the cleanup using JS and regex and then output into the wysiwyg editor?
0
 

Author Comment

by:CPL593H
ID: 22775448
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
 

Expert Comment

by:longbloke69
ID: 22775690
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
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 

Author Comment

by:CPL593H
ID: 22776135
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
 
LVL 16

Expert Comment

by:sh0e
ID: 22782925
Bind onPaste and modify the HTML before paste with some RegEx.
Does this need to work in FireFox?
0
 

Author Comment

by:CPL593H
ID: 22783567
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
 
LVL 16

Expert Comment

by:sh0e
ID: 22783937

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
 

Author Comment

by:CPL593H
ID: 22784388
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
 
LVL 13

Expert Comment

by:numberkruncher
ID: 22791367
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
 
LVL 16

Expert Comment

by:sh0e
ID: 22792314

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
 

Author Comment

by:CPL593H
ID: 22794027
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
 
LVL 16

Accepted Solution

by:
sh0e earned 2000 total points
ID: 22798356
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
 

Author Comment

by:CPL593H
ID: 22798430
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
 
LVL 16

Assisted Solution

by:sh0e
sh0e earned 2000 total points
ID: 22798490
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
 
LVL 16

Expert Comment

by:sh0e
ID: 22798500
?! tells it to fail match if it finds it
0
 

Author Closing Comment

by:CPL593H
ID: 31508695
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

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question