Preserving SCRIPT tags (and more) in CKEditor

Sampson picture Sampson · Nov 16, 2009 · Viewed 27.5k times · Source

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

Andrei Dragomir picture Andrei Dragomir · Jul 4, 2014

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.