How To Integrate CKEditor 4 in HTML And jQuery

Reading Time: 5 minutes

There are several editors in jquery which decorates the simple text with images, files, fonts etc. So inside this article we will see how to integrate ckeditor 4 in html and jquery.

To work with CKEditor we need to setup it’s library file.

Let’s get started.

Download & CKEditor jQuery Library Settings

To download the CKEditor files click here When you go inside this section you should see different different packages of CKEditor.

We can download according to usage in project.

Also we have an alternative option to use ckeditor 4 with live CDN link. If you scroll down the above link, you should see

For all features and their way to use you can also visit this link CKEditor 4 Feratures.

Basic Integration of CKEditor 4 in HTML

<!doctype html>
<html lang="en">

  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Setting editor UI language</title>
  <script src=""></script>

  <textarea cols="80" rows="10" id="sample-editor" name="sample-editor"></textarea>



  • CDN link we have used for CKEditor
  • Implementing CKEditor with Textarea CKEDITOR.replace(‘sample-editor’);

When you run the above code, you will get this.

This is the basic implementation. In case if we want to work it’s internal features, also we can use it.

Let’s see some features of CKEditor 4.

About Some Features of CKEditor 4

Language Settings of CKEditor 4

      language: 'hi' // Hindi language code

Here are the following available language codes of CKEditor 4

“af” => Afrikaans
“sq” => Albanian
“ar” => Arabic
“az” => Azerbaijani
“eu” => Basque
“bn” => Bengali/Bangla
“bs” => Bosnian
“bg” => Bulgarian
“ca” => Catalan
“zh-cn” => Chinese Simplified
“zh” => Chinese Traditional
“hr” => Croatian
“cs” => Czech
“da” => Danish
“nl” => Dutch
“en” => English
“en-au” => English (Australia)
“en-ca” => English (Canadian)
“en-gb” => English (United Kingdom)
“eo” => Esperanto
“et” => Estonian
“fo” => Faroese
“fi” => Finnish
“fr” => French
“fr-ca” => French (Canada)
“gl” => Galician
“ka” => Georgian
“de” => German
“de-ch” => German (Switzerland)
“el” => Greek
“gu” => Gujarati
“he” => Hebrew
“hi” => Hindi
“hu” => Hungarian
“is” => Icelandic
“id” => Indonesian
“it” => Italian
“ja” => Japanese
“km” => Khmer
“ko” => Korean
“ku” => Kurdish
“lv” => Latvian
“lt” => Lithuanian
“mk” => Macedonian
“ms” => Malay
“mn” => Mongolian
“no” => Norwegian
“nb” => Norwegian Bokmal
“oc” => Occitan
“fa” => Persian
“pl” => Polish
“pt-br” => Portuguese (Brazil)
“pt” => Portuguese (Portugal)
“ro” => Romanian
“ru” => Russian
“sr” => Serbian (Cyrillic)
“sr-latn” => Serbian (Latin)
“si” => Sinhala
“sk” => Slovak
“sl” => Slovenian
“es” => Spanish
“es-mx” => Spanish (Mexico)
“sv” => Swedish
“tt” => Tatar
“th” => Thai
“tr” => Turkish
“ug” => Uighur
“uk” => Ukrainian
“vi” => Vietnamese
“cy” => Welsh

Adding Color Picker to CKEditor 4 Toolbar

    CKEDITOR.replace('sample-editor', {
      extraPlugins: 'uicolor'

Chane CDN Link from standard to standard-all

<script src=""></script>

We hope this article helped you to learn about How To Integrate CKEditor 4 in HTML And jQuery in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Sanjay KumarHello friends, I am Sanjay Kumar a Web Developer by profession. Additionally I'm also a Blogger, Youtuber by Passion. I founded Online Web Tutor and Skillshike platforms. By using these platforms I am sharing the valuable knowledge of Programming, Tips and Tricks, Programming Standards and more what I have with you all. Read more