Aktion für den CKEditor - das JavaScript auslagern // Action for the CKEditor - outsource the JavaScript // REDAXO 4.6.1 // Bootstrap Typography Styles

ckeditor.preview-action.js

<script type="text/javascript">
//Diesen Code als PREVIEW-ACTION ADD+EDIT an Textmodule hängen, die mit dem CK-Texteditor arbeiten:
//This Code as PREVIEW-ACTION ADD+EDIT linked to modules using the CKEDitor
jQuery(document).ready(function($) {
    $('.editors').each(function() {
    var id = $(this).attr('id');
    CKEDITOR.replace(id, {
        height: 400,
        fillEmptyBlocks: false,
        forcePasteAsPlainText: false,
        entities: false,
        linkShowTargetTab: true,
        format_tags: 'p;h1;h2;h3;pre',
        removePlugins: '',
        extraPlugins: 'rex_help',
        removeDialogTabs: '',
        toolbar: [
            ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'],
            ['Link', 'Unlink', 'Anchor'],
            ['Image', 'Table', 'Seperator', 'HorizontalRule', 'SpecialChar'],
            ['TextColor', 'BGColor'],
            ['CreateDiv'],
            ['Maximize'],
            ['Source'],
            ['rex_help'],
            '/',
            ['Format', 'Styles'],
            ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'],
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
            // no comma after last entry!!!
        ],
        contentsCss: [CKEDITOR.basePath + 'contents.css',
            '.small-text { font-size: .750em; }' +
            '.big-text { font-size: 1.5em; }' +
            '.table { border: 1px solid #666; }' +
            '.table-striped { background-color: #999; }' +
            '.table-bordered { border: 1px solid #F00; }' +
            '.table-hover { background-color: #DFF0D8; }' +
            '.table-condensed { cell-spacing: 1px }' +
            '.img-responsive { display: block; width: 100%;}' +
            '.text-condensed { font-family: "Open Sans Condensed", sans-serif; letter-spacing: -100; }' +
            '.text-uppercase { text-transform: uppercase; }' +
            '.text-lowercase { text-transform: lowercase; }' +
            '.text-capitalize { text-transform: capitalize; }' +
            '.text-left { text-align: left; }' +
            '.text-center { text-align: center; }' +
            '.text-right { text-align: right; }' +
            '.text-justify { text-align: justify; }' +
            '.text-nowrap { white-space: nowrap; }' +
            '.lead { font-size: 1.5em }' +
            '.blockquote-reverse { padding-right: 15px; padding-left: 0; text-align: right; border-right: 5px solid #eee; border-left: 0; }' +
            '.list-unstyled { padding-left: 0; list-style: none; }' +
            '.list-inline { padding-left: 0; margin-left: -5px; list-style: none; }'
            //additional css goes here
            // no plus after last entry!!!
        ]
        // no comma after last entry!!!
    });
  });
  CKEDITOR.stylesSet.add('default', [
      { name: 'Kleiner Text', element: 'p', attributes: { 'class': 'small-text' } },
      { name: 'Grosser Text', element: 'span', attributes: { 'class': 'big-text' } },
      { name: 'Grosser Text', element: 'p', attributes: { 'class': 'big-text' } },
      { name: 'Tabelle responsiv', element: 'table', attributes: { 'class': 'table' } },
      { name: 'Bild responsiv', element: 'img', attributes: { 'class': 'img-responsive' } },
      { name: 'Schmale Schrift', element: 'span', attributes: { 'class': 'text-condensed' } },
      { name: 'GROSSGESCHRIEBEN', element: 'span', attributes: { 'class': 'text-uppercase' } },
      { name: 'kleingeschrieben', element: 'span', attributes: { 'class': 'text-lowercase' } },
      { name: 'Erster Buchstabe Gross', element: 'p', attributes: { 'class': 'text-capitalize' } },
      { name: 'Text linksbündig', element: 'p', attributes: { 'class': 'text-left' } },
      { name: 'Text zentriert', element: 'p', attributes: { 'class': 'text-center' } },
      { name: 'Text rechtsbündig', element: 'p', attributes: { 'class': 'text-right' } },
      { name: 'Textblock', element: 'p', attributes: { 'class': 'text-justify' } },
      { name: 'Kein Umbruch', element: 'p', attributes: { 'class': 'text-nowrap' } },
      { name: 'Einleitung', element: 'p', attributes: { 'class': 'lead' } },
      { name: 'Zitat rechtsbündig', element: 'blockquote', attributes: { 'class': 'blockquote-reverse' } },
      { name: 'Liste ungestylt', element: 'ul', attributes: { 'class': 'list-unstyled' } },
      { name: 'Liste inline', element: 'ul', attributes: { 'class': 'list-inline' } }
      // no comma after last entry!!!
  ]);
});
</script>

important.php

<?php
// Wichtig ist hierbei, dass die Eingabe Module unterschiedliche IDs haben, aber alle die gleiche Klasse .editors

// Important that all used textareas in the module have different IDs but the same class called .editors
?>

<textarea id="ckeditor1" class="editors" name="VALUE[1]" style="display: none;">REX_VALUE[1]</textarea>

<textarea id="ckeditor2" class="editors" name="VALUE[2]" style="display: none;">REX_VALUE[2]</textarea>