CODEWITHSUNDEEP
javascriptckeditor
Martyn
Martyn

Reputation: 6383

How do I apply configuration to textareas by class name?

I have the following file which I'm trying to replace a textarea with a class name and given configurations:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
        <script src="//cdn.ckeditor.com/4.4.6/standard/ckeditor.js"></script>
    </head>
    <body>
        <textarea name="editor1" class="js-ckeditor"></textarea>
        <script>
            CKEDITOR.replaceAll( 'js-ckeditor', {
                removeButtons: 'Cut,Copy,Paste,PasteText,PasteFromWord,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript,Table,HorizontalRule,Smiley,SpecialChar,Maximize,Source,Indent,Blockquote,Styles,Format,About,SpellChecker',
                toolbar: [
                    { name: 'basicstyles', items: [ 'Bold', 'Italic', 'RemoveFormat' ] },
                    { name: 'resources', items: [ 'Link', 'Image' ] },
                    { name: 'list', items: [ 'NumberedList', 'BulletedList' ] }
                ],
                toolbarGroups: [
                    { name: 'group1', groups: [ 'basicstyles' ] },
                    { name: 'group2', groups: [ 'resources' ] },
                    { name: 'group3', groups: [ 'list' ] }
                ],
                removePlugins: 'resize,elementspath',
                removeDialogTabs: 'link:advanced;image:Link;image:advanced',
            } );
        </script>
    </body>
</html>

.. the problem is that it replaces the textarea with in instance of CKEditor, but it doesn't apply the configuration.

However, if I do CKEDITOR.replace( 'editor1', { it replaces the textarea and applies the configuration. But in my case I need to replace by class name. Can I apply configuration to elements using replaceAll, or another means?

Upvotes: 0

Views: 1471

Answers (2)

şeyhmus aydoğdu
şeyhmus aydoğdu

Reputation: 11

You can use jquery $.each function: 

jQuery(document).ready(function() {

    $( ".ckeditor" ).each(function( index ) {
        CKEDITOR.replace($( this ).attr("id"),{
            //your configurations
        });
    });
});

Upvotes: 1

oleq
oleq

Reputation: 15895

See the documentation of CKEDITOR.replaceAll. Use callback function to select the right subset of textareas and set configuration:

CKEDITOR.replaceAll( function( textarea, config ) {
    if ( new CKEDITOR.dom.element( textarea ).hasClass( 'js-ckeditor' ) ) {
        CKEDITOR.tools.extend( config, {
            removeButtons: 'Cut,Copy,Paste,PasteText,PasteFromWord,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript,Table,HorizontalRule,Smiley,SpecialChar,Maximize,Source,Indent,Blockquote,Styles,Format,About,SpellChecker',
            toolbar: [
                { name: 'basicstyles', items: [ 'Bold', 'Italic', 'RemoveFormat' ] },
                { name: 'resources', items: [ 'Link', 'Image' ] },
                { name: 'list', items: [ 'NumberedList', 'BulletedList' ] }
            ],
            toolbarGroups: [
                { name: 'group1', groups: [ 'basicstyles' ] },
                { name: 'group2', groups: [ 'resources' ] },
                { name: 'group3', groups: [ 'list' ] }
            ],
            removePlugins: 'resize,elementspath',
            removeDialogTabs: 'link:advanced;image:Link;image:advanced',
        } );

        return true;
    } 

    return false;
} );

Upvotes: 0

Related Questions