Thursday, July 08, 2010

Enabling plain text copy in fckeditor

Recently I came across a very weird scenario where I was required to use fckeditor  instead of normal html text area to allow user to format text typed by him.
This all lead to another problem that user can copy from anywhere and paste it in the editor area and when which allows special formatting and external images styles and other html, which affected the content rendering functionality.
So to control the user inputs we need to allow only plain text inputs inspite what ever user have copied to clipboard from other souce using Ctrl+C keystrokes.

I was moving from pillar to post to get this plain text functionality working, looking for plugins and any proper solution in forums.

Finallybu doing minor changes to configuration file (thanks to fckeditor developer for allowing easy configurations) of fckeditor i am able to get what i want.
Open the orginal configuration file that comes with editor and look for code

FCKConfig.ForcePasteAsPlainText    = false;
FCKConfig.Keystrokes = [
    [ CTRL + 65 /*A*/, true ],
    [ CTRL + 67 /*C*/, true ],
    [ CTRL + 70 /*F*/, true ],
    [ CTRL + 83 /*S*/, true ],
    [ CTRL + 84 /*T*/, true ],
    [ CTRL + 88 /*X*/, true ],
    [ CTRL + 86 /*V*/, 'Paste' ],
    [ CTRL + 45 /*INS*/, true ],
    [ SHIFT + 45 /*INS*/, 'Paste' ],
    [ CTRL + 88 /*X*/, 'Cut' ],
    [ SHIFT + 46 /*DEL*/, 'Cut' ],
    [ CTRL + 90 /*Z*/, 'Undo' ],
    [ CTRL + 89 /*Y*/, 'Redo' ],
    [ CTRL + SHIFT + 90 /*Z*/, 'Redo' ],
    [ CTRL + 76 /*L*/, 'Link' ],
    [ CTRL + 66 /*B*/, 'Bold' ],
    [ CTRL + 73 /*I*/, 'Italic' ],
    [ CTRL + 85 /*U*/, 'Underline' ],
    [ CTRL + SHIFT + 83 /*S*/, 'Save' ],
    [ CTRL + ALT + 13 /*ENTER*/, 'FitWindow' ],
    [ SHIFT + 32 /*SPACE*/, 'Nbsp' ]
] ;

Now open your custom configuration file (or create one http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/Configuration_File)

FCKConfig.ForcePasteAsPlainText    = true ;
FCKConfig.Keystrokes = [
    [ CTRL + 65 /*A*/, true ],
    [ CTRL + 67 /*C*/, true ],
    [ CTRL + 70 /*F*/, true ],
    [ CTRL + 83 /*S*/, true ],
    [ CTRL + 84 /*T*/, true ],
    [ CTRL + 88 /*X*/, true ],
    [ CTRL + 86 /*V*/, 'PasteText' ],
    [ CTRL + 45 /*INS*/, true ],
    [ SHIFT + 45 /*INS*/, 'PasteText' ],
    [ CTRL + 88 /*X*/, 'Cut' ],
    [ SHIFT + 46 /*DEL*/, 'Cut' ],
    [ CTRL + 90 /*Z*/, 'Undo' ],
    [ CTRL + 89 /*Y*/, 'Redo' ],
    [ CTRL + SHIFT + 90 /*Z*/, 'Redo' ],
    [ CTRL + 76 /*L*/, 'Link' ],
    [ CTRL + 66 /*B*/, 'Bold' ],
    [ CTRL + 73 /*I*/, 'Italic' ],
    [ CTRL + 85 /*U*/, 'Underline' ],
    [ CTRL + SHIFT + 83 /*S*/, 'Save' ],
    [ CTRL + ALT + 13 /*ENTER*/, 'FitWindow' ],
    [ SHIFT + 32 /*SPACE*/, 'Nbsp' ]
] ;

Monday, June 28, 2010

JQuery hide/show menu item persistence

I was working on search filters. The needed functionality is to toggle the set of checkbox elements and persist the user selected options. I want to do all this at browser end...

Here is how i did it...

Below is a html code
<div>
   <a href="javascript:void(0);" id="xyz">Click here</a>
</div>

<div id="abc">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

The needed functionality is when user hide/show the div with id= "abc", then it should persist untill user closes the browser..
jQuery(function(){

   // on page load call 
    <portlet:namespace/>toggleCookie("abc");
     <portlet:namespace/>hideShow("abc");

       jQuery("#xyz").click(function(){
            <portlet:namespace/>toggleCookie("abc");
            <portlet:namespace/>hideShow("abc");
        });
});


function <portlet:namespace/>hideShow(objId){
        if (jQuery.cookie(objId) == null || jQuery.cookie(objId) == "hide") {
            jQuery("#"+objId).hide();
        }
        else {
            jQuery("#"+objId).show();
        }
    }

    function <portlet:namespace/>toggleCookie(objId){
        if(jQuery.cookie(objId) == null){
            jQuery.cookie(objId, "hide");
        }
        else if(jQuery.cookie(objId) == "hide"){
            jQuery.cookie(objId, "show");
        }
        else if(jQuery.cookie(objId) == "show"){
            jQuery.cookie(objId, "hide");
        }
    }