CKEditor convert selected text to Uppercase or lowercase


While I was working on a project that I released last night I did many things and custom commands for CKEditor. Out of those I am sharing a couple of lines code with you which will show you how to get selected text from CHEditor and how to perform an operation on the returned text.

Ok so first of all we do our usual stuff and transform our textarea to a Rich text editor.

A simple one liner I guess

Note that the class ckeditor is intentional and when you include ckeditor.js on your page that will do the trick and transform you simple editor to a Rich text editor. Ok so now considering that all went well, lets get hold of instance of our editor as shown below

That was pretty simple. I used DOT notation but you can also get editor instance in typical array value retrieval though keys too as shown below

Alright! now that we have our editor instance lets do couple of things. To start with lets add couple of buttons to our page as shown below

One of the button is calling our yet to be declared javascript function uppercase() and second calling lowercase()

Lets declare these functions as shown below

Our uppercase function

Our lowercase function


That’s it.  Try it and I am pretty sure that you will get it right the first time.


I’ll add a demo when I get a chance.

Please note: You can also write custom command to do exactly the same stuff but I’ll leave that exercise to you.

I hope this helps and gives you a pointer to achieve a solution. If you have anything to add please leave your comment.






  1. thanks so much I spend all the day lock for that.

  2. Önder Ceylan says

    There is a ready to use plugin that accomplish what you are looking for:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.