CKEditor on focus CSS change

I am using CKEditor in a symfony project with the FOSCKEditor-bundle 1.2. I would like the whole elment that includes a CKEditor to have a border on focus, similar to how you write or answer a question on Stackoverflow.
Using an older question and a JSFiddle, i've gotten this far:

// Set focus and blur listeners for all editors to be created.

CKEDITOR.on( 'instanceReady', function( evt ) {

    var editor = evt.editor,

        body = CKEDITOR.document.getBody();



    editor.on( 'focus', function() {

        // Use jQuery if you want.

        body.addClass( 'fix' );

    } );



    editor.on( 'blur', function() {

        // Use jQuery if you want.

        body.removeClass( 'fix' );

    } );    

} );



CKEDITOR.replace( 'editor', {

    plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar',

    on: {

        // Focus and blur listeners can be set per-instance,

        // if needed.

        // focus: function() {},

        // blur: function() {}

    }

} );

Or as a demo of JSFiddle. Everything looks alright on the fiddle, however with my version of CKEditor the border is actually set on the body of the main page and nog the CKEditor.

I don't understand why it won't work or what to change. Ideas?

edited Nov 20 '18 at 13:30

wanttobeprofessional

98331223

asked Nov 19 '18 at 20:51

Dirk J. Faber

1,1441217

add a comment |

// Set focus and blur listeners for all editors to be created.

CKEDITOR.on( 'instanceReady', function( evt ) {

    var editor = evt.editor,

        body = CKEDITOR.document.getBody();



    editor.on( 'focus', function() {

        // Use jQuery if you want.

        body.addClass( 'fix' );

    } );



    editor.on( 'blur', function() {

        // Use jQuery if you want.

        body.removeClass( 'fix' );

    } );    

} );



CKEDITOR.replace( 'editor', {

    plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar',

    on: {

        // Focus and blur listeners can be set per-instance,

        // if needed.

        // focus: function() {},

        // blur: function() {}

    }

} );

Or as a demo of JSFiddle. Everything looks alright on the fiddle, however with my version of CKEditor the border is actually set on the body of the main page and nog the CKEditor.

I don't understand why it won't work or what to change. Ideas?

edited Nov 20 '18 at 13:30

wanttobeprofessional

98331223

asked Nov 19 '18 at 20:51

Dirk J. Faber

1,1441217

add a comment |

// Set focus and blur listeners for all editors to be created.

CKEDITOR.on( 'instanceReady', function( evt ) {

    var editor = evt.editor,

        body = CKEDITOR.document.getBody();



    editor.on( 'focus', function() {

        // Use jQuery if you want.

        body.addClass( 'fix' );

    } );



    editor.on( 'blur', function() {

        // Use jQuery if you want.

        body.removeClass( 'fix' );

    } );    

} );



CKEDITOR.replace( 'editor', {

    plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar',

    on: {

        // Focus and blur listeners can be set per-instance,

        // if needed.

        // focus: function() {},

        // blur: function() {}

    }

} );

Or as a demo of JSFiddle. Everything looks alright on the fiddle, however with my version of CKEditor the border is actually set on the body of the main page and nog the CKEditor.

I don't understand why it won't work or what to change. Ideas?

edited Nov 20 '18 at 13:30

wanttobeprofessional

98331223

asked Nov 19 '18 at 20:51

Dirk J. Faber

1,1441217

// Set focus and blur listeners for all editors to be created.

CKEDITOR.on( 'instanceReady', function( evt ) {

    var editor = evt.editor,

        body = CKEDITOR.document.getBody();



    editor.on( 'focus', function() {

        // Use jQuery if you want.

        body.addClass( 'fix' );

    } );



    editor.on( 'blur', function() {

        // Use jQuery if you want.

        body.removeClass( 'fix' );

    } );    

} );



CKEDITOR.replace( 'editor', {

    plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar',

    on: {

        // Focus and blur listeners can be set per-instance,

        // if needed.

        // focus: function() {},

        // blur: function() {}

    }

} );

Or as a demo of JSFiddle. Everything looks alright on the fiddle, however with my version of CKEditor the border is actually set on the body of the main page and nog the CKEditor.

I don't understand why it won't work or what to change. Ideas?

javascript symfony ckeditor

edited Nov 20 '18 at 13:30

wanttobeprofessional

98331223

asked Nov 19 '18 at 20:51

Dirk J. Faber

1,1441217

edited Nov 20 '18 at 13:30

wanttobeprofessional

98331223

asked Nov 19 '18 at 20:51

Dirk J. Faber

1,1441217

edited Nov 20 '18 at 13:30

wanttobeprofessional

98331223

edited Nov 20 '18 at 13:30

wanttobeprofessional

98331223

edited Nov 20 '18 at 13:30

wanttobeprofessional

98331223

asked Nov 19 '18 at 20:51

Dirk J. Faber

1,1441217

asked Nov 19 '18 at 20:51

Dirk J. Faber

1,1441217

asked Nov 19 '18 at 20:51

Dirk J. Faber

1,1441217

add a comment |

2 Answers
2

active

oldest

votes

The CKEDITOR.document is equivalent to window.document (not the same because ). If you want to add class to body element of specific editor instance, use editor.document.getBody();.

Another problem is that body of editor instance is kept inside internal document so if you want the fix class to have an effect, you need to add it to e.g. ckeditor/contents.css or a file assigned to https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss.

I also would recommend replacing the default margin:20px; from body rule with padding: 20px; margin : 0;.

EDIT:

Based on your comments I think, a better approach would be:

        <style>

            .fix {

                border: 5px solid black !important;

            }

        </style>

        ...

        var editor = CKEDITOR.replace( 'editor1', {/*instance configuration goes here*/});

        CKEDITOR.on( 'instanceReady', function( evt ) {



            var main_container = document.getElementById( 'cke_' + evt.editor.name ),

                content_container = main_container.getElementsByClassName( 'cke_contents' )[0];



                editor.on( 'focus', function() {

                    content_container.classList.add( "fix" );

                } );



                editor.on( 'blur', function() {

                    content_container.classList.remove( "fix" );

                } ); 

        } );

NOTES:

The style rule can be put into CSS file but in this case this needs to be main page CSS file and not contents.css

It is necessary to add the !important to border in your fix class because editor's cke_reset sets it to 0. You can also add it as inline style.

Here is a working example: https://codepen.io/j_swiderski/pen/XyMyme

edited Nov 22 '18 at 13:10

answered Nov 20 '18 at 13:09

j.swiderski

1,7792717

I did exactly what you suggested but there is an issue. The border is now only around the paragraph of what you are entering it seems (so it runs though the text area).
– Dirk J. Faber
Nov 20 '18 at 14:12

You said you wanted it around CKEditor body so that what the code does. Please note if there is no content inside the body, it will have the size of one line. You may work around it by adding inside contents.css e.g. min-height:200px. Please also remember about replacing margin:20px with padding: 20px; margin : 0;. If this is not what you want, you may try adding that border around div with class cke_contents which is the container for whole content area but in that case you need to add it as inline style and not as a class.
– j.swiderski
Nov 20 '18 at 14:13

I get what you saying and you are right. With this solution though (i did everything just like you said) I will have a border shown on three sides (left, right and bottom) even with a different z-index. More problematic is the fact that if you do happen to have a height that extends the 200px (for example) the border is not responsive, so the text runs through it. I'm going to try your second suggestion.
– Dirk J. Faber
Nov 20 '18 at 15:38

I have added an extra solution that might work for you.
– j.swiderski
Nov 21 '18 at 13:48

I thank you for all the help, but I'm afraid it does not work. I have managed to find a solution though which I will post here as an answer.
– Dirk J. Faber
Nov 21 '18 at 19:29

|
show 4 more comments

In the CKEditor when you focus on the text area, it gets an added class cke_focus. Using this class and the second div element with id cke_1_contents you can create some css to create a border on the contents (the text area), when focused on. Like this:

.cke_focus #cke_1_contents {

            border: 5px solid black !important;

}

Like Swiderski says: It is necessary to add the !important to border in your fix class because editor's cke_reset sets it to 0. You can also add it as inline style.

answered Nov 21 '18 at 19:34

Dirk J. Faber

1,1441217

Please note that if you have more than one editor on your page this solution will no longer be valid because the ID will be different. What is more, if you destroy and create editor instances dynamically like e.g. here nightly.ckeditor.com/18-11-22-07-04/full/samples/old/ajax.html your solution will only work for the first editor. With the code I have given you you can have as many editors as you like.
– j.swiderski
Nov 22 '18 at 12:40

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382451%2fckeditor-on-focus-css-change%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

The CKEDITOR.document is equivalent to window.document (not the same because ). If you want to add class to body element of specific editor instance, use editor.document.getBody();.

I also would recommend replacing the default margin:20px; from body rule with padding: 20px; margin : 0;.

EDIT:

Based on your comments I think, a better approach would be:

        <style>

            .fix {

                border: 5px solid black !important;

            }

        </style>

        ...

        var editor = CKEDITOR.replace( 'editor1', {/*instance configuration goes here*/});

        CKEDITOR.on( 'instanceReady', function( evt ) {



            var main_container = document.getElementById( 'cke_' + evt.editor.name ),

                content_container = main_container.getElementsByClassName( 'cke_contents' )[0];



                editor.on( 'focus', function() {

                    content_container.classList.add( "fix" );

                } );



                editor.on( 'blur', function() {

                    content_container.classList.remove( "fix" );

                } ); 

        } );

NOTES:

The style rule can be put into CSS file but in this case this needs to be main page CSS file and not contents.css

It is necessary to add the !important to border in your fix class because editor's cke_reset sets it to 0. You can also add it as inline style.

Here is a working example: https://codepen.io/j_swiderski/pen/XyMyme

edited Nov 22 '18 at 13:10

answered Nov 20 '18 at 13:09

j.swiderski

1,7792717

I did exactly what you suggested but there is an issue. The border is now only around the paragraph of what you are entering it seems (so it runs though the text area).
– Dirk J. Faber
Nov 20 '18 at 14:12

You said you wanted it around CKEditor body so that what the code does. Please note if there is no content inside the body, it will have the size of one line. You may work around it by adding inside contents.css e.g. min-height:200px. Please also remember about replacing margin:20px with padding: 20px; margin : 0;. If this is not what you want, you may try adding that border around div with class cke_contents which is the container for whole content area but in that case you need to add it as inline style and not as a class.
– j.swiderski
Nov 20 '18 at 14:13

I get what you saying and you are right. With this solution though (i did everything just like you said) I will have a border shown on three sides (left, right and bottom) even with a different z-index. More problematic is the fact that if you do happen to have a height that extends the 200px (for example) the border is not responsive, so the text runs through it. I'm going to try your second suggestion.
– Dirk J. Faber
Nov 20 '18 at 15:38

I have added an extra solution that might work for you.
– j.swiderski
Nov 21 '18 at 13:48

I thank you for all the help, but I'm afraid it does not work. I have managed to find a solution though which I will post here as an answer.
– Dirk J. Faber
Nov 21 '18 at 19:29

|
show 4 more comments

The CKEDITOR.document is equivalent to window.document (not the same because ). If you want to add class to body element of specific editor instance, use editor.document.getBody();.

I also would recommend replacing the default margin:20px; from body rule with padding: 20px; margin : 0;.

EDIT:

Based on your comments I think, a better approach would be:

        <style>

            .fix {

                border: 5px solid black !important;

            }

        </style>

        ...

        var editor = CKEDITOR.replace( 'editor1', {/*instance configuration goes here*/});

        CKEDITOR.on( 'instanceReady', function( evt ) {



            var main_container = document.getElementById( 'cke_' + evt.editor.name ),

                content_container = main_container.getElementsByClassName( 'cke_contents' )[0];



                editor.on( 'focus', function() {

                    content_container.classList.add( "fix" );

                } );



                editor.on( 'blur', function() {

                    content_container.classList.remove( "fix" );

                } ); 

        } );

NOTES:

The style rule can be put into CSS file but in this case this needs to be main page CSS file and not contents.css

It is necessary to add the !important to border in your fix class because editor's cke_reset sets it to 0. You can also add it as inline style.

Here is a working example: https://codepen.io/j_swiderski/pen/XyMyme

edited Nov 22 '18 at 13:10

answered Nov 20 '18 at 13:09

j.swiderski

1,7792717

I did exactly what you suggested but there is an issue. The border is now only around the paragraph of what you are entering it seems (so it runs though the text area).
– Dirk J. Faber
Nov 20 '18 at 14:12

You said you wanted it around CKEditor body so that what the code does. Please note if there is no content inside the body, it will have the size of one line. You may work around it by adding inside contents.css e.g. min-height:200px. Please also remember about replacing margin:20px with padding: 20px; margin : 0;. If this is not what you want, you may try adding that border around div with class cke_contents which is the container for whole content area but in that case you need to add it as inline style and not as a class.
– j.swiderski
Nov 20 '18 at 14:13

I get what you saying and you are right. With this solution though (i did everything just like you said) I will have a border shown on three sides (left, right and bottom) even with a different z-index. More problematic is the fact that if you do happen to have a height that extends the 200px (for example) the border is not responsive, so the text runs through it. I'm going to try your second suggestion.
– Dirk J. Faber
Nov 20 '18 at 15:38

I have added an extra solution that might work for you.
– j.swiderski
Nov 21 '18 at 13:48

I thank you for all the help, but I'm afraid it does not work. I have managed to find a solution though which I will post here as an answer.
– Dirk J. Faber
Nov 21 '18 at 19:29

|
show 4 more comments

The CKEDITOR.document is equivalent to window.document (not the same because ). If you want to add class to body element of specific editor instance, use editor.document.getBody();.

I also would recommend replacing the default margin:20px; from body rule with padding: 20px; margin : 0;.

EDIT:

Based on your comments I think, a better approach would be:

        <style>

            .fix {

                border: 5px solid black !important;

            }

        </style>

        ...

        var editor = CKEDITOR.replace( 'editor1', {/*instance configuration goes here*/});

        CKEDITOR.on( 'instanceReady', function( evt ) {



            var main_container = document.getElementById( 'cke_' + evt.editor.name ),

                content_container = main_container.getElementsByClassName( 'cke_contents' )[0];



                editor.on( 'focus', function() {

                    content_container.classList.add( "fix" );

                } );



                editor.on( 'blur', function() {

                    content_container.classList.remove( "fix" );

                } ); 

        } );

NOTES:

The style rule can be put into CSS file but in this case this needs to be main page CSS file and not contents.css

It is necessary to add the !important to border in your fix class because editor's cke_reset sets it to 0. You can also add it as inline style.

Here is a working example: https://codepen.io/j_swiderski/pen/XyMyme

edited Nov 22 '18 at 13:10

answered Nov 20 '18 at 13:09

j.swiderski

1,7792717

The CKEDITOR.document is equivalent to window.document (not the same because ). If you want to add class to body element of specific editor instance, use editor.document.getBody();.

I also would recommend replacing the default margin:20px; from body rule with padding: 20px; margin : 0;.

EDIT:

Based on your comments I think, a better approach would be:

        <style>

            .fix {

                border: 5px solid black !important;

            }

        </style>

        ...

        var editor = CKEDITOR.replace( 'editor1', {/*instance configuration goes here*/});

        CKEDITOR.on( 'instanceReady', function( evt ) {



            var main_container = document.getElementById( 'cke_' + evt.editor.name ),

                content_container = main_container.getElementsByClassName( 'cke_contents' )[0];



                editor.on( 'focus', function() {

                    content_container.classList.add( "fix" );

                } );



                editor.on( 'blur', function() {

                    content_container.classList.remove( "fix" );

                } ); 

        } );

NOTES:

The style rule can be put into CSS file but in this case this needs to be main page CSS file and not contents.css

It is necessary to add the !important to border in your fix class because editor's cke_reset sets it to 0. You can also add it as inline style.

Here is a working example: https://codepen.io/j_swiderski/pen/XyMyme

edited Nov 22 '18 at 13:10

answered Nov 20 '18 at 13:09

j.swiderski

1,7792717

edited Nov 22 '18 at 13:10

answered Nov 20 '18 at 13:09

j.swiderski

1,7792717

answered Nov 20 '18 at 13:09

j.swiderski

1,7792717

answered Nov 20 '18 at 13:09

j.swiderski

1,7792717

I did exactly what you suggested but there is an issue. The border is now only around the paragraph of what you are entering it seems (so it runs though the text area).
– Dirk J. Faber
Nov 20 '18 at 14:12

You said you wanted it around CKEditor body so that what the code does. Please note if there is no content inside the body, it will have the size of one line. You may work around it by adding inside contents.css e.g. min-height:200px. Please also remember about replacing margin:20px with padding: 20px; margin : 0;. If this is not what you want, you may try adding that border around div with class cke_contents which is the container for whole content area but in that case you need to add it as inline style and not as a class.
– j.swiderski
Nov 20 '18 at 14:13

I get what you saying and you are right. With this solution though (i did everything just like you said) I will have a border shown on three sides (left, right and bottom) even with a different z-index. More problematic is the fact that if you do happen to have a height that extends the 200px (for example) the border is not responsive, so the text runs through it. I'm going to try your second suggestion.
– Dirk J. Faber
Nov 20 '18 at 15:38

I have added an extra solution that might work for you.
– j.swiderski
Nov 21 '18 at 13:48

I thank you for all the help, but I'm afraid it does not work. I have managed to find a solution though which I will post here as an answer.
– Dirk J. Faber
Nov 21 '18 at 19:29

|
show 4 more comments

I did exactly what you suggested but there is an issue. The border is now only around the paragraph of what you are entering it seems (so it runs though the text area).
– Dirk J. Faber
Nov 20 '18 at 14:12

You said you wanted it around CKEditor body so that what the code does. Please note if there is no content inside the body, it will have the size of one line. You may work around it by adding inside contents.css e.g. min-height:200px. Please also remember about replacing margin:20px with padding: 20px; margin : 0;. If this is not what you want, you may try adding that border around div with class cke_contents which is the container for whole content area but in that case you need to add it as inline style and not as a class.
– j.swiderski
Nov 20 '18 at 14:13

I get what you saying and you are right. With this solution though (i did everything just like you said) I will have a border shown on three sides (left, right and bottom) even with a different z-index. More problematic is the fact that if you do happen to have a height that extends the 200px (for example) the border is not responsive, so the text runs through it. I'm going to try your second suggestion.
– Dirk J. Faber
Nov 20 '18 at 15:38

I have added an extra solution that might work for you.
– j.swiderski
Nov 21 '18 at 13:48

I thank you for all the help, but I'm afraid it does not work. I have managed to find a solution though which I will post here as an answer.
– Dirk J. Faber
Nov 21 '18 at 19:29

I did exactly what you suggested but there is an issue. The border is now only around the paragraph of what you are entering it seems (so it runs though the text area).
– Dirk J. Faber
Nov 20 '18 at 14:12

You said you wanted it around CKEditor body so that what the code does. Please note if there is no content inside the body, it will have the size of one line. You may work around it by adding inside contents.css e.g. min-height:200px. Please also remember about replacing margin:20px with padding: 20px; margin : 0;. If this is not what you want, you may try adding that border around div with class cke_contents which is the container for whole content area but in that case you need to add it as inline style and not as a class.
– j.swiderski
Nov 20 '18 at 14:13

I get what you saying and you are right. With this solution though (i did everything just like you said) I will have a border shown on three sides (left, right and bottom) even with a different z-index. More problematic is the fact that if you do happen to have a height that extends the 200px (for example) the border is not responsive, so the text runs through it. I'm going to try your second suggestion.
– Dirk J. Faber
Nov 20 '18 at 15:38

I have added an extra solution that might work for you.
– j.swiderski
Nov 21 '18 at 13:48

I thank you for all the help, but I'm afraid it does not work. I have managed to find a solution though which I will post here as an answer.
– Dirk J. Faber
Nov 21 '18 at 19:29

|
show 4 more comments

.cke_focus #cke_1_contents {

            border: 5px solid black !important;

}

Like Swiderski says: It is necessary to add the !important to border in your fix class because editor's cke_reset sets it to 0. You can also add it as inline style.

answered Nov 21 '18 at 19:34

Dirk J. Faber

1,1441217

Please note that if you have more than one editor on your page this solution will no longer be valid because the ID will be different. What is more, if you destroy and create editor instances dynamically like e.g. here nightly.ckeditor.com/18-11-22-07-04/full/samples/old/ajax.html your solution will only work for the first editor. With the code I have given you you can have as many editors as you like.
– j.swiderski
Nov 22 '18 at 12:40

add a comment |

.cke_focus #cke_1_contents {

            border: 5px solid black !important;

}

Like Swiderski says: It is necessary to add the !important to border in your fix class because editor's cke_reset sets it to 0. You can also add it as inline style.

answered Nov 21 '18 at 19:34

Dirk J. Faber

1,1441217

Please note that if you have more than one editor on your page this solution will no longer be valid because the ID will be different. What is more, if you destroy and create editor instances dynamically like e.g. here nightly.ckeditor.com/18-11-22-07-04/full/samples/old/ajax.html your solution will only work for the first editor. With the code I have given you you can have as many editors as you like.
– j.swiderski
Nov 22 '18 at 12:40

add a comment |

.cke_focus #cke_1_contents {

            border: 5px solid black !important;

}

Like Swiderski says: It is necessary to add the !important to border in your fix class because editor's cke_reset sets it to 0. You can also add it as inline style.

answered Nov 21 '18 at 19:34

Dirk J. Faber

1,1441217

.cke_focus #cke_1_contents {

            border: 5px solid black !important;

}

Like Swiderski says: It is necessary to add the !important to border in your fix class because editor's cke_reset sets it to 0. You can also add it as inline style.

answered Nov 21 '18 at 19:34

Dirk J. Faber

1,1441217

answered Nov 21 '18 at 19:34

Dirk J. Faber

1,1441217

answered Nov 21 '18 at 19:34

Dirk J. Faber

1,1441217

answered Nov 21 '18 at 19:34

Dirk J. Faber

1,1441217

Please note that if you have more than one editor on your page this solution will no longer be valid because the ID will be different. What is more, if you destroy and create editor instances dynamically like e.g. here nightly.ckeditor.com/18-11-22-07-04/full/samples/old/ajax.html your solution will only work for the first editor. With the code I have given you you can have as many editors as you like.
– j.swiderski
Nov 22 '18 at 12:40

add a comment |

Please note that if you have more than one editor on your page this solution will no longer be valid because the ID will be different. What is more, if you destroy and create editor instances dynamically like e.g. here nightly.ckeditor.com/18-11-22-07-04/full/samples/old/ajax.html your solution will only work for the first editor. With the code I have given you you can have as many editors as you like.
– j.swiderski
Nov 22 '18 at 12:40

Please note that if you have more than one editor on your page this solution will no longer be valid because the ID will be different. What is more, if you destroy and create editor instances dynamically like e.g. here nightly.ckeditor.com/18-11-22-07-04/full/samples/old/ajax.html your solution will only work for the first editor. With the code I have given you you can have as many editors as you like.
– j.swiderski
Nov 22 '18 at 12:40

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu