Preserving SCRIPT tags (and more) in CKEditor

Question

Is it possible to create a block of code within the CKEditor that will not be touched by the editor itself, and will be maintained in its intended-state until explicitly changed by the user? I've been attempting to input javascript variables (bound in script tags) and a flash movie following, but CKEditor continues to rewrite my pasted code/markup, and in doing so breaking my code.

I'm working with the following setup:

<script type="text/javascript">
  var editor = CKEDITOR.replace("content", {
    height : "500px",
    width : "680px",
    resize_maxWidth : "680px",
    resize_minWidth : "680px",
    toolbar :
    [
      ['Source','-','Save','Preview'],
      ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
      ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
      ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
      ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
      ['Link','Unlink','Anchor'],
      ['Image','Table','HorizontalRule','SpecialChar']
    ]
  });
  CKFinder.SetupCKEditor( editor, "<?php print url::base(); ?>assets/ckfinder" );
</script>

I suppose the most ideal solution would be to preserve the contents of any tag that contains class="preserve" enabling much more than the limited exclusives.

Update: I'm thinking the solution to this problem is in CKEDITOR.config.protectedSource(), but my regular-expression experience is proving to be too juvenile to handle this issue. How would I go about exempting all tags that contain the 'preserved' class from being touched by CKEditor?

Answer 1

In CKEDITOR folder you have a config.js file. Open it and paste the code:

CKEDITOR.editorConfig = function( config ) {
    config.allowedContent = {
        script: true,
        $1: {
            // This will set the default set of elements
            elements: CKEDITOR.dtd,
            attributes: true,
            styles: true,
            classes: true
        }
    };
};

It will allow <script>...</script> tags in Source mode.

Answer 2

Suggestion 1: Create separate plain textarea for the admin to enter the scripts / HTML code.

Suggestion 2: Introduce a bbcode, like [script][/script] or [html][/html] that the admins can use to put the scripts / HTML code and have your server-side translate them into <script></script> and HTML code. Make sure when showing a saved content into the CKEditor, you need to have your server-side translate them into the bbcode first (or CKEditor will strip them out). Or the less-hassle way is to store the submitted content in the database as it is entered and only do the translation when displaying the page.

Suggestion 3: Since you want to use class="preserve" to mark tags you don't want CKEditor to strip out, then add the following JavaScript lines when initializing the editor:

// protect <anytag class="preserve"></anytag>
CKEDITOR.config.protectedSource.push( /<([\S]+)[^>]*class="preserve"[^>]*>.*<\/\1>/g );
// protect <anytag class="preserve" /><
CKEDITOR.config.protectedSource.push( /<[^>]+class="preserve"[^>\/]*\/>/g );

Answer 3

The issue is not with the CKEditor. Instead, the issue was with the MVC-Engine running the Site itself. Kohana has a global_xss_filtering within its configuration that is enabled by default. This prevents the submission of script tags, to prevent scripting-attacks on your site. Changing this value to false will permit the submission of <script> tags in forms, but it also opens up the site to potential security issues that can be very serious. It is advisable that you not disable global_xss_filtering.

/* /(system|application)/config/config.php - line 66 */
/**
 * Enable or disable global XSS filtering of GET, POST, and SERVER data. This
 * option also accepts a string to specify a specific XSS filtering tool.
 */
$config['global_xss_filtering'] = FALSE;