Using Sourcer with CKEditor for Joomla

Print

I am using CKEdit

or for Joomla with Joomla! 2.5 (I know I need to update this site) and had a hard time getting sourcer to work. The problem was that CKEditor encoded everything including apostrophes.

If I turned off encoding, nothing would be encoded which is a problem for client admin input.

I used the lower 3 options before coming to this conclusion:

The Best Method for Using Sourcer:

Leave the HTML Entities radio button on Yes:

sourcer1

Add the following into the Custom Configuration:

sourcer_best

// The following MUST be double backslashed every change.
CKEDITOR.config.protectedSource.push( /{source}[\\s\\S]*?{\\/source}/g );

Here is the twist. Notice every backslash is double backslashed. Every time you save the configuration, it strips one backslash, SO ANY FUTURE CHANGES REQUIRE YOU TO REPEAT THE DOUBLE BACKSLASHING OR THE WYSIWYG editor will break.

(image after save)
sourcer_best_after_save

Below are three other options for entering source code into CKEditor for Joomla!:

The first option:

  • PRO
    • Easy to implement
    • Retains the encoding of basic HTML special chars for lay users and convenience
  • CON
    • Can't use OOP (No > char)
    • Can only use apostrophes. No Quotes inside code.

To do this leave the option for encoding entities on:

sourcer1

Then in the Custom Configuration space add this:

sourcer2
The default value of config.entities_additional is the encoded apostrophe, so this removes that value.

The Second Option:

  • PRO
    • Can use OOP
    • Can use Quotes and apostrophes
  • CON
    • No encoding takes place. Text entry does not encode ampersands, quotes, apostrophes, etc.
To do this, turn off the radio button for encoding, and add this to the box below to still encode ampersands and angle brackets. NOTE: The first line is probably not necessary as the radio button already did that, but I settled for option 1 and did not test that.

CKEDITOR.config.entities = false;
CKEDITOR.config.basicEntities = true;

sourcer3

The Third Option:

  • PRO
    • Best of both worlds. Encoding takes place on entered text, PHP is preserved (No [[ ]] syntax), you can use quotes and apostrophes, and you can use OOP
  • CON
    • Must be careful making any further adjustments to CKEditor properties
    • Potential security risk. If you screw up the CKEditor settings (see below), your PHP code may show up in the site. Also, if you are not careful, it could expose the public side to entering PHP code through a WYSIWYG editor (though I think the framework would prevent it unless the public side had access to sourcer as well).

To use the third method, turn encoding back on through the radio button and add the following to the Custom Configuration:

sourcer4Here is the twist. Notice every backslash is double backslashed. Every time you save the configuration, it strips one backslash, SO ANY FUTURE CHANGES REQUIRE YOU TO REPEAT THE DOUBLE BACKSLASHING OR THE WYSIWYG editor will break.

(Image after saving config)
sourcer5

This code protects PHP so you can have your cake and eat it to as long as you don't break the cake.