Forum

Thread tagged as: Problem, Addons, CKEditor

CKEditor - multiple configs

Hi,

I've added the ckeditor to Perch via:

<perch:content id="text" type="textarea" label="Text" markdown="true" editor="ckeditor" html="true" imagewidth="640" imageheight="480" />

I'd like to specify a different config file for certain editable regions to add/remove features relevant to the content region.

I'm fully up to speed with how to update the ckeditor config settings. However, I cannot see how and where to integrate this with perch as there does not seem to be any mechanism for specifying alternative config files?

Thanks for your help.
Nick Capehorn

Nick Capehorn 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Sure there is. In your _config.inc you can use the string PERCH_EDITOR_CONFIG

This will be replaced with the value of the editor-config attribute on your tag.

So in your _config.inc you could do something like:

if ('PERCH_EDITOR_CONFIG' == 'special') {
    ... do your special config ...
}else{
   ... do your normal config ...
}

and then in your template

<perch:content id="text" type="textarea" label="Text" markdown="true" editor="ckeditor" html="true" imagewidth="640" imageheight="480" editor-config="special" />
Daniel Ruffle

Daniel Ruffle 0 points

5 years ago

This is great I have been looking for a way of doing this. I am trying to set some of the styles in ckeditor and I can't seem to get it working. Can you point me in the right direction? This is the code I have but doesn't work so I must be doing something wrong.

<script type="text/javascript" src="PERCH_LOGINPATH/addons/plugins/editors/ckeditor/ckeditor.js"></script>
<script type="text/javascript" charset="utf-8"> 
CKEDITOR.config.filebrowserUploadUrl = 'PERCH_LOGINPATH/addons/plugins/editors/ckeditor/uploader.php?filetype=file';
CKEDITOR.config.filebrowserImageUploadUrl = 'PERCH_LOGINPATH/addons/plugins/editors/ckeditor/uploader.php?filetype=image';
CKEDITOR.on('instanceReady',function(e){
    var editor = e.editor;  
    var textarea = $('#'+editor.name);
    var config = '';

    config += '&width='     +(textarea.attr('data-width')||'');
    config += '&height='    +(textarea.attr('data-height')||'');
    config += '&crop='      +(textarea.attr('data-crop')||'');
    config += '&density='   +(textarea.attr('data-density')||'');
    config += '&sharpen='   +(textarea.attr('data-sharpen')||'');
    config += '&quality='   +(textarea.attr('data-quality')||'');
    config += '&bucket='    +(textarea.attr('data-bucket')||'default');

    editor.config.filebrowserImageUploadUrl += config;
    editor.config.filebrowserUploadUrl      += '&bucket=' +(textarea.attr('data-bucket')||'default');

    if ('PERCH_EDITOR_CONFIG' == 'one') {

            editor.stylesSet.add( 'my_styles',
        [
            // Block-level styles
            { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
            { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },

            // Inline styles
            { name : 'Gold', element : 'span', attributes : { 'class' : 'gold' } },
            { name : 'Blue', element : 'span', attributes : { 'class' : 'blue' } }

        ]);

        editor.config.stylesSet = 'my_styles';

    }else{


    }

});

$(function() {
    $('textarea.ckeditor').wrap('<div class="editor-wrap" style="float:left;"></div>');
});

</script>
Daniel Ruffle

Daniel Ruffle 0 points

5 years ago

Hi Guys, further to this I don't actually need to specify a different config for each text area. I wanted to set the drop down style options in the editor.

However when I add the following code to the config.js only one text area appears when editing a region. Instead of the 4 that should appear.

The error says my_styles already registered.

CKEDITOR.stylesSet.add( 'my_styles',
[
    // Block-level styles
    { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
    { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },

    // Inline styles
    { name : 'Gold', element : 'span', attributes : { 'class' : 'gold' } },
    { name : 'Blue', element : 'span', attributes : { 'class' : 'blue' } }


]);

config.stylesSet = 'my_styles';

The above works for the first text area that shows. Then doesn't display any more text areas.