CODEWITHSUNDEEP
jqueryckeditor
user3354539
user3354539

Reputation: 1245

ckeditor change uicolor on form reset button

I have my CKEditor installed on my form so that when there is a validation error associated with the CKEditor, the CKEditor is colored red - so the user will know which control to correct.

I have used the following jquery code on my form to colour the invalid CKEditor:

CKEDITOR.instances['id_of_text_area'].config.uiColor = '#b94a48';

When I click the form reset button, I want the uiColor of the invalid CKEditor to be changed back to the default color, but the above code does not work. I have tried several different code lines but none seem to work.

The following code does not work:

CKEDITOR.replace( 'id_of_text_area', { uiColor: "#AADC6E" });

How would I change the color of the CKEditor back to the default colour when I click on the form reset button?

EDIT:

Parry's andwser works, but re-instates the full toolbar.

How do I re-instate the default toolbar form my settings:

CKEDITOR_CONFIGS = {
'default': {
    'toolbar': [
        [ 'Bold', 'Italic', 'Underline' ], #, 'Strike'
        #[ 'Cut', 'Copy', 'Paste', 'PasteFromWord' ],
        [ 'NumberedList', 'BulletedList' ], #, 'Indent', 'Outdent' 
        [ 'SpecialChar', 'SelectAll' ], #'Table', 
        [ 'Link', 'Unlink' ],
        #[ 'Styles' ],
        [ 'SpellChecker', 'Scayt' ],
        [ 'Undo', 'Redo' ],
        [ 'Maximize' ]
    ],
    'width': 600,
    'height': 60,
    'toolbarCanCollapse': False,
    'autoGrow_minHeight': 60,
    'minHeight': 60,

},

Upvotes: 2

Views: 777

Answers (1)

Jagjot
Jagjot

Reputation: 6136

I think you need to destroy the older instance of CKEDITOR before you can change it's color.

Here check this JSFiddle. I hope it helps.

http://jsfiddle.net/9B9gw/2/

    $(function(){
        CKEDITOR.replace("test");
        $(document).on('click', '#reset', function(){
            $("#form1")[0].reset();
            CKEDITOR.instances['test'].destroy();
            CKEDITOR.replace('test', { uiColor : "#AADC6E"} );
        });
    });

As per the updated question, I have updated the JSFiddle, http://jsfiddle.net/9B9gw/4/

Upvotes: 3

Related Questions