Monday, October 8, 2012

How to protect your Coldfusion tags in CkEditors

It too me soooo long to figure this one out. I dug through TONS of Google links to finally come up with a solution.  Enjoy!

First, lets walk through the steps of installing CKEditor

Step 1: Download the files here: http://ckeditor.com/download

Step 2: Follow the installation Instructions here: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Installation

Step 3: Go to the SAMPLE files (see installation Instructions) and recreate one of the samples as your actual editing form. Make sure the following files are included on your editing form:


    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script src="ckeditor/_samples/sample.js" type="text/javascript"></script>
    <link href="ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />

AND this is how to create the actual editor:

<textarea class="ckeditor" toolbar="Basic"  name="englishText"></textarea>

Step 4: Here is where the config.js file comes in. You'll want to open the config.js file (it's in the ckeditor root folder)  and add the following lines:

   
    config.protectedSource.push( /<\?[\s\S]*?\?>/g );
    config.protectedSource.push(/[^<]*(<h1>([^<]+)<\/h1>)/g);
    config.protectedSource.push( /<cfscript[\s\S]*?\/cfscript>/g );
    config.protectedSource.push( /<br[\s\S]*?\/>/g );   // BR Tags
    config.protectedSource.push( /<img[\s\S]*?\/>/g );   // IMG Tags
    config.protectedSource.push( /{exp:[\s\S]*?{\/exp:[^\}]+}/g );    // Expression Engine style server side code
    config.protectedSource.push( /{.*?}/g);
    config.protectedSource.push( /<tex[\s\S]*?\/tex>/g);
    config.protectedSource.push( /<object[\s|\S]+?<\/object>/g); // Protects <OBJECT> tags
    config.protectedSource.push( /<style[\s\S]*?\/style>/g); // Protects <STYLE> tags
    config.protectedSource.push( /<cfoutput[\s\S]*?\/cfoutput>/g); // Protects <CFOUTPUT> tags
    config.protectedSource.push( /<pre[\s\S]*?\/pre>/g);
    config.protectedSource.push( /<code[\s\S]*?\/code>/g);
    config.protectedSource.push( /<cfinclude[\s\S]*?\/cfinclude>/g);
    config.protectedSource.push( /<cfloop[\s\S]*?\/cfloop>/g);   
    config.protectedSource.push( /<cfset[\s\S]*?\/cfset/g);
   
   
config.protectedSource.push( /<cf[\s\S]*?>/gi ) ; // ColdFusion cf tags - OPEN.
config.protectedSource.push( /<\/cf[\s\S]*?>/gi ) ; // ColdFusion cf tags - CLOSE.

   
    config.ProtectedTags = 'cfquery|cfif|cfoutput|cfloop' ;



CKEDITOR.on( 'instanceReady', function( ev )
   {
     ev.editor.dataProcessor.writer.setRules( 'cfoutput',
         {
            indent : false,
            breakBeforeOpen : false,
            breakAfterOpen : false,
            breakBeforeClose : false,
            breakAfterClose : false
         });
       
          ev.editor.dataProcessor.writer.setRules( 'cfinvoke',
         {
            indent : false,
            breakBeforeOpen : false,
            breakAfterOpen : false,
            breakBeforeClose : false,
            breakAfterClose : false
         });
       
       
          ev.editor.dataProcessor.writer.setRules( 'cfloop',
         {
            indent : false,
            breakBeforeOpen : false,
            breakAfterOpen : false,
            breakBeforeClose : false,
            breakAfterClose : false
         });
       
           ev.editor.dataProcessor.writer.setRules( 'cfinclude',
         {
            indent : false,
            breakBeforeOpen : false,
            breakAfterOpen : false,
            breakBeforeClose : false,
            breakAfterClose : false
         });
       
           ev.editor.dataProcessor.writer.setRules( 'p',
         {
            indent : false,
            breakBeforeOpen : false,
            breakAfterOpen : false,
            breakBeforeClose : false,
            breakAfterClose : false
         }
         );
       
         /*// Output self closing tags the HTML4 and HTML5 way
ev.editor.dataProcessor.writer.selfClosingEnd = '>';*/
       
   }
   


Now, so far all of my CF tags are protected and it is working fine. If you see that I am missing something, let me know. Also let me know how this works for you.


7 comments:

  1. Monique - Thank you so much for this... I too did a lot of searching and found your post - I guess it depends how you phrase your searches - There's not too many references to ckEditor breaking coldfusion - Whe I combined the search with "COLDFUSION protectedSource" I found this page - Thank god ;-)

    Martin

    ReplyDelete
  2. hi there, thank you for this. It's a fantastic post.
    It all works well but ckeditor removes end tag but not the start tag .
    Have tried to put config.protectedSource.push( /<cfform[\s\S]*?\/cfform>/g); but no joy.
    Any suggestions please?
    Thanks

    ReplyDelete
    Replies
    1. Hello. Did you make sure to put all of the code shown above?

      Like these lines:

      config.protectedSource.push( //gi ) ; // ColdFusion cf tags - OPEN.
      config.protectedSource.push( /<\/cf[\s\S]*?>/gi ) ; // ColdFusion cf tags - CLOSE.

      Delete
    2. Also make sure you include the very last few lines

      Delete
  3. thanks, I've included them all and still not happening. In fact what I've noticed is that it saves it all fine first time but when I save it second time it changes/removes text

    ReplyDelete
  4. So we cut that gig provider or the kind of gig out of our traffic generation arsenal. Or maybe we see that press releases really rock and generated a ton of traffic to our site. best fiverr gig ideas

    ReplyDelete