We work with the developer version of CKEditor 4

Often there is a temptation to make some changes in CKEditor: add your own plugins there, configure it to fit your needs. Fortunately, all this allows CKEditor to make a little blood. All this can be found in the CKEditor 4 documentation. In this post I would like to talk in detail about how to work with the developer version of CKEditor 4: getting from the developer version release version, compressing scripts, including custom plugin icons in sprite and more.
I would like to draw your attention to the fact that the first part of the article is not tied to a specific technology and can be useful to anyone interested in the work of the CKEditor.
I ask all interested under cat.

You can pick up the source code for CKEditor 4 from the git repository: github.com/ckeditor/ckeditor-dev
Also, the dev version can be downloaded in a specific configuration of ckeditor.com/builder , using the interface offered on the site or by downloading the configuration file build-config.js. I will tell you more about the purpose of this file later.

So, let's begin. Pump ckeditor-dev from the git repository. Inside there is a samples folder where you can try out these sources. To build a release version from a dev version we need CKBuilder. You can find it in the dev / builder folder. Inside there are two files of interest: build-config.js and build.sh.

Run build.sh, then find the created folder ckbuilder, where ckbuilder.jar is located.
In order to build CKEditor, you need to use ckbuilder.jar with the necessary parameters. You can find out about the CKBuilder parameters using the --help key:
> java -jar ckbuilder.jar --help

The assembly process is as follows:
Once launched, ckbuilder will check for all the necessary files. Next, the build process will begin, ckbuilder will collect all the plugins from build-config.js into one ckeditor.js file. Then the minification process will begin, all files will be changed and reduced.
')
Important: CKBuilder in the build process includes in ckeditor.js all the necessary files and the plug-ins you specified from the build-config.js configuration file.

All steps of the build process will be displayed in the console. The finished ckeditor will by default be in the release folder.

What is build-config.js for?

This file contains the standard wysiwyg settings, as well as a list of all the plug-ins that will be compiled into one ckeditor.js file. For example:

 var CKBUILDER_CONFIG = { skin: 'moono', ignore: [ 'dev', 'README.md', '.gitignore', '.gitattributes', '.idea', '.mailmap', '.DS_Store', 'ckbuilder' ], plugins: { a11yhelp: 0, about: 0, basicstyles: 1, bidi: 0 } }; 

In order to include any plugin in the assembly, you need to add its name to the list with parameter 1.
In ignore, you can add files and folders that you do not want to see in the release version. For example, I included the ckbuilder folder in this array - it does not fall into release. All files and folders not included in ignore will be in the release version and all js files will be minimized. If you want to keep the file not minimized, insert the line in it:
// %LEAVE_UNMINIFIED% %REMOVE_LINE%

More on CKBuilder guidelines

CKBuilder copies file by file from the source folder to the final one. It searches for special combinations of characters (directives) in text files and processes them accordingly.
Some directives are:
%VERSION% - build version (can be inserted using the --version key).
%TIMESTAMP% - the concatenation of the four characters year + month + day + hour (YYMMDDHH) in 36-number system. (For example, 87bm == 08071122).
%REMOVE_LINE% - delete a row.
%REMOVE_START% and %REMOVE_END% - deletes all lines between% REMOVE_START% and% REMOVE_END%, including the directives themselves.
%LEAVE_UNMINIFIED% - leaves the file in which this directive is uncompressed. (Use this: // %LEAVE_UNMINIFIED% %REMOVE_LINE% )

We include icons for custom plugins in the sprite.

To reduce the number of requests to the server, you can enable icons of custom plug-ins in the sprite. To do this, do the following:
1. In the folder with the skin, create the icons folder and add the icons in png format there. The file name of the icon must match the name of the plugin. To avoid problems with the names it is best to name the icon files in lower case.
2. In the folder with the plugin we also create the icons folder. There we put an icon for this plugin (the file name is preferably in lower case).
That is quite enough. But in order for the icons to work in the dev version, you need to change the skin.js file in the skin folder. In this file we find the line:
// 4. Register the skin icons for development purposes only
Next, uncomment the function written below. Add icons for custom plugins in icons.

  (function() { var icons = ( 'bullet,' + 'plugin1,' + 'plugin2' ).split(','); var iconsFolder = CKEDITOR.getUrl( CKEDITOR.skin.path() + 'icons/' ); for ( var i = 0; i < icons.length; i++ ) { CKEDITOR.skin.addIcon( icons[ i ], iconsFolder + icons[ i ] + '.png' ); } })(); 

Read more about working with skins in the documentation: docs.cksource.com/CKEditor_4.x/Skin_SDK

Add compressed ckeditor.js to bundle using SquishIt

To heighten the "grip", consider adding compressed ckeditor.js to the bundle using the .Net library SquishIt .
We try to include in the bundle file ckeditor.js:

 @MvcHtmlString.Create(Bundle.JavaScript() .Add("~/Scripts/jquery-1.7.1.min.js") .Add("~/Scripts/ckeditor/ckeditor.js") .Render("~/Scripts/test_#.js")) 

As a result, we get a lot of javascript errors:

The reason is that ckeditor is trying to find these files relative to the current location. The problem is solved very simply. It is enough to specify the base path to the folder with ckeditor:

 <script type="text/javascript"> var CKEDITOR_BASEPATH = '@Url.Content("~/Scripts/ckeditor/")'; </script> @MvcHtmlString.Create(Bundle.JavaScript() .Add("~/Scripts/jquery-1.7.1.min.js") .Add("~/Scripts/ckeditor/ckeditor.js") .Render("~/Scripts/test_#.js")) 

Automate the assembly of CKEditor 4 in the ASP.NET MVC Framework

In this section I will show one of the options for automating the assembly of CKEditor 4 in the ASP.NET MVC Framework. Let's make the project use this or that version of ckeditor depending on the parameter in the web.config.

 
 true -  dev  
 false -  release  
 
   web-   Scripts  ckeditor-dev   .      dev    ckbuilder,     ,      ckbuilder     : 
 - build.bat 
 - build.js 
 - ckbuilder.jar 
 
  build.bat: 
 @ECHO OFF CLS java -jar %1\ckeditor-dev\ckbuilder\ckbuilder.jar --build %1\ckeditor-dev %1\ckeditor --build-config %1\ckeditor-dev\ckbuilder\build.js --version 4.2.2 --no-zip --no-tar --overwrite XCOPY %1\ckeditor\ckeditor\* %1\ckeditor /e /i RD %1\ckeditor\ckeditor /s /q 
      DebugSettings: 
 public static class DebugSettings { public static string CkEditorFolder { get { if (HttpContext.Current.IsDebuggingEnabled) { return "ckeditor-dev"; } return "ckeditor"; } } } 
   ckeditor    : 
 <script type="text/javascript"> var CKEDITOR_BASEPATH = '@Url.Content(string.Format("~/Scripts/{0}/", DebugSettings.CkEditorFolder))'; </script> @MvcHtmlString.Create(Bundle.JavaScript() .Add("~/Scripts/jquery-1.7.1.min.js") .Add(string.Format("~/Scripts/{0}/ckeditor.js", DebugSettings.CkEditorFolder)) .Render("~/Scripts/test_#.js")) 
     ckeditor.      build.bat.         ,    ckeditor-dev. 
  TestApp    build.bat  Post-build event: 
  
 
 call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts 
  ckeditor    ,   ,          ckeditor  : 
 ::call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts 
      csproj    ckeditor  msbuild.  . 


true - dev
false - release

web- Scripts ckeditor-dev . dev ckbuilder, , ckbuilder :
- build.bat
- build.js
- ckbuilder.jar

build.bat:
@ECHO OFF CLS java -jar %1\ckeditor-dev\ckbuilder\ckbuilder.jar --build %1\ckeditor-dev %1\ckeditor --build-config %1\ckeditor-dev\ckbuilder\build.js --version 4.2.2 --no-zip --no-tar --overwrite XCOPY %1\ckeditor\ckeditor\* %1\ckeditor /e /i RD %1\ckeditor\ckeditor /s /q
DebugSettings:
public static class DebugSettings { public static string CkEditorFolder { get { if (HttpContext.Current.IsDebuggingEnabled) { return "ckeditor-dev"; } return "ckeditor"; } } }
ckeditor :
<script type="text/javascript"> var CKEDITOR_BASEPATH = '@Url.Content(string.Format("~/Scripts/{0}/", DebugSettings.CkEditorFolder))'; </script> @MvcHtmlString.Create(Bundle.JavaScript() .Add("~/Scripts/jquery-1.7.1.min.js") .Add(string.Format("~/Scripts/{0}/ckeditor.js", DebugSettings.CkEditorFolder)) .Render("~/Scripts/test_#.js"))
ckeditor. build.bat. , ckeditor-dev.
TestApp build.bat Post-build event:


call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts
ckeditor , , ckeditor :
::call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts
csproj ckeditor msbuild. .

 
 true -  dev  
 false -  release  
 
   web-   Scripts  ckeditor-dev   .      dev    ckbuilder,     ,      ckbuilder     : 
 - build.bat 
 - build.js 
 - ckbuilder.jar 
 
  build.bat: 
 @ECHO OFF CLS java -jar %1\ckeditor-dev\ckbuilder\ckbuilder.jar --build %1\ckeditor-dev %1\ckeditor --build-config %1\ckeditor-dev\ckbuilder\build.js --version 4.2.2 --no-zip --no-tar --overwrite XCOPY %1\ckeditor\ckeditor\* %1\ckeditor /e /i RD %1\ckeditor\ckeditor /s /q 
      DebugSettings: 
 public static class DebugSettings { public static string CkEditorFolder { get { if (HttpContext.Current.IsDebuggingEnabled) { return "ckeditor-dev"; } return "ckeditor"; } } } 
   ckeditor    : 
 <script type="text/javascript"> var CKEDITOR_BASEPATH = '@Url.Content(string.Format("~/Scripts/{0}/", DebugSettings.CkEditorFolder))'; </script> @MvcHtmlString.Create(Bundle.JavaScript() .Add("~/Scripts/jquery-1.7.1.min.js") .Add(string.Format("~/Scripts/{0}/ckeditor.js", DebugSettings.CkEditorFolder)) .Render("~/Scripts/test_#.js")) 
     ckeditor.      build.bat.         ,    ckeditor-dev. 
  TestApp    build.bat  Post-build event: 
  
 
 call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts 
  ckeditor    ,   ,          ckeditor  : 
 ::call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts 
      csproj    ckeditor  msbuild.  . 


true - dev
false - release

web- Scripts ckeditor-dev . dev ckbuilder, , ckbuilder :
- build.bat
- build.js
- ckbuilder.jar

build.bat:
@ECHO OFF CLS java -jar %1\ckeditor-dev\ckbuilder\ckbuilder.jar --build %1\ckeditor-dev %1\ckeditor --build-config %1\ckeditor-dev\ckbuilder\build.js --version 4.2.2 --no-zip --no-tar --overwrite XCOPY %1\ckeditor\ckeditor\* %1\ckeditor /e /i RD %1\ckeditor\ckeditor /s /q
DebugSettings:
public static class DebugSettings { public static string CkEditorFolder { get { if (HttpContext.Current.IsDebuggingEnabled) { return "ckeditor-dev"; } return "ckeditor"; } } }
ckeditor :
<script type="text/javascript"> var CKEDITOR_BASEPATH = '@Url.Content(string.Format("~/Scripts/{0}/", DebugSettings.CkEditorFolder))'; </script> @MvcHtmlString.Create(Bundle.JavaScript() .Add("~/Scripts/jquery-1.7.1.min.js") .Add(string.Format("~/Scripts/{0}/ckeditor.js", DebugSettings.CkEditorFolder)) .Render("~/Scripts/test_#.js"))
ckeditor. build.bat. , ckeditor-dev.
TestApp build.bat Post-build event:


call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts
ckeditor , , ckeditor :
::call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts
csproj ckeditor msbuild. .

 
 true -  dev  
 false -  release  
 
   web-   Scripts  ckeditor-dev   .      dev    ckbuilder,     ,      ckbuilder     : 
 - build.bat 
 - build.js 
 - ckbuilder.jar 
 
  build.bat: 
 @ECHO OFF CLS java -jar %1\ckeditor-dev\ckbuilder\ckbuilder.jar --build %1\ckeditor-dev %1\ckeditor --build-config %1\ckeditor-dev\ckbuilder\build.js --version 4.2.2 --no-zip --no-tar --overwrite XCOPY %1\ckeditor\ckeditor\* %1\ckeditor /e /i RD %1\ckeditor\ckeditor /s /q 
      DebugSettings: 
 public static class DebugSettings { public static string CkEditorFolder { get { if (HttpContext.Current.IsDebuggingEnabled) { return "ckeditor-dev"; } return "ckeditor"; } } } 
   ckeditor    : 
 <script type="text/javascript"> var CKEDITOR_BASEPATH = '@Url.Content(string.Format("~/Scripts/{0}/", DebugSettings.CkEditorFolder))'; </script> @MvcHtmlString.Create(Bundle.JavaScript() .Add("~/Scripts/jquery-1.7.1.min.js") .Add(string.Format("~/Scripts/{0}/ckeditor.js", DebugSettings.CkEditorFolder)) .Render("~/Scripts/test_#.js")) 
     ckeditor.      build.bat.         ,    ckeditor-dev. 
  TestApp    build.bat  Post-build event: 
  
 
 call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts 
  ckeditor    ,   ,          ckeditor  : 
 ::call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts 
      csproj    ckeditor  msbuild.  . 


true - dev
false - release

web- Scripts ckeditor-dev . dev ckbuilder, , ckbuilder :
- build.bat
- build.js
- ckbuilder.jar

build.bat:
@ECHO OFF CLS java -jar %1\ckeditor-dev\ckbuilder\ckbuilder.jar --build %1\ckeditor-dev %1\ckeditor --build-config %1\ckeditor-dev\ckbuilder\build.js --version 4.2.2 --no-zip --no-tar --overwrite XCOPY %1\ckeditor\ckeditor\* %1\ckeditor /e /i RD %1\ckeditor\ckeditor /s /q
DebugSettings:
public static class DebugSettings { public static string CkEditorFolder { get { if (HttpContext.Current.IsDebuggingEnabled) { return "ckeditor-dev"; } return "ckeditor"; } } }
ckeditor :
<script type="text/javascript"> var CKEDITOR_BASEPATH = '@Url.Content(string.Format("~/Scripts/{0}/", DebugSettings.CkEditorFolder))'; </script> @MvcHtmlString.Create(Bundle.JavaScript() .Add("~/Scripts/jquery-1.7.1.min.js") .Add(string.Format("~/Scripts/{0}/ckeditor.js", DebugSettings.CkEditorFolder)) .Render("~/Scripts/test_#.js"))
ckeditor. build.bat. , ckeditor-dev.
TestApp build.bat Post-build event:


call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts
ckeditor , , ckeditor :
::call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts
csproj ckeditor msbuild. .

 
 true -  dev  
 false -  release  
 
   web-   Scripts  ckeditor-dev   .      dev    ckbuilder,     ,      ckbuilder     : 
 - build.bat 
 - build.js 
 - ckbuilder.jar 
 
  build.bat: 
 @ECHO OFF CLS java -jar %1\ckeditor-dev\ckbuilder\ckbuilder.jar --build %1\ckeditor-dev %1\ckeditor --build-config %1\ckeditor-dev\ckbuilder\build.js --version 4.2.2 --no-zip --no-tar --overwrite XCOPY %1\ckeditor\ckeditor\* %1\ckeditor /e /i RD %1\ckeditor\ckeditor /s /q 
      DebugSettings: 
 public static class DebugSettings { public static string CkEditorFolder { get { if (HttpContext.Current.IsDebuggingEnabled) { return "ckeditor-dev"; } return "ckeditor"; } } } 
   ckeditor    : 
 <script type="text/javascript"> var CKEDITOR_BASEPATH = '@Url.Content(string.Format("~/Scripts/{0}/", DebugSettings.CkEditorFolder))'; </script> @MvcHtmlString.Create(Bundle.JavaScript() .Add("~/Scripts/jquery-1.7.1.min.js") .Add(string.Format("~/Scripts/{0}/ckeditor.js", DebugSettings.CkEditorFolder)) .Render("~/Scripts/test_#.js")) 
     ckeditor.      build.bat.         ,    ckeditor-dev. 
  TestApp    build.bat  Post-build event: 
  
 
 call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts 
  ckeditor    ,   ,          ckeditor  : 
 ::call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts 
      csproj    ckeditor  msbuild.  . 


true - dev
false - release

web- Scripts ckeditor-dev . dev ckbuilder, , ckbuilder :
- build.bat
- build.js
- ckbuilder.jar

build.bat:
@ECHO OFF CLS java -jar %1\ckeditor-dev\ckbuilder\ckbuilder.jar --build %1\ckeditor-dev %1\ckeditor --build-config %1\ckeditor-dev\ckbuilder\build.js --version 4.2.2 --no-zip --no-tar --overwrite XCOPY %1\ckeditor\ckeditor\* %1\ckeditor /e /i RD %1\ckeditor\ckeditor /s /q
DebugSettings:
public static class DebugSettings { public static string CkEditorFolder { get { if (HttpContext.Current.IsDebuggingEnabled) { return "ckeditor-dev"; } return "ckeditor"; } } }
ckeditor :
<script type="text/javascript"> var CKEDITOR_BASEPATH = '@Url.Content(string.Format("~/Scripts/{0}/", DebugSettings.CkEditorFolder))'; </script> @MvcHtmlString.Create(Bundle.JavaScript() .Add("~/Scripts/jquery-1.7.1.min.js") .Add(string.Format("~/Scripts/{0}/ckeditor.js", DebugSettings.CkEditorFolder)) .Render("~/Scripts/test_#.js"))
ckeditor. build.bat. , ckeditor-dev.
TestApp build.bat Post-build event:


call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts
ckeditor , , ckeditor :
::call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts
csproj ckeditor msbuild. .

 
 true -  dev  
 false -  release  
 
   web-   Scripts  ckeditor-dev   .      dev    ckbuilder,     ,      ckbuilder     : 
 - build.bat 
 - build.js 
 - ckbuilder.jar 
 
  build.bat: 
 @ECHO OFF CLS java -jar %1\ckeditor-dev\ckbuilder\ckbuilder.jar --build %1\ckeditor-dev %1\ckeditor --build-config %1\ckeditor-dev\ckbuilder\build.js --version 4.2.2 --no-zip --no-tar --overwrite XCOPY %1\ckeditor\ckeditor\* %1\ckeditor /e /i RD %1\ckeditor\ckeditor /s /q 
      DebugSettings: 
 public static class DebugSettings { public static string CkEditorFolder { get { if (HttpContext.Current.IsDebuggingEnabled) { return "ckeditor-dev"; } return "ckeditor"; } } } 
   ckeditor    : 
 <script type="text/javascript"> var CKEDITOR_BASEPATH = '@Url.Content(string.Format("~/Scripts/{0}/", DebugSettings.CkEditorFolder))'; </script> @MvcHtmlString.Create(Bundle.JavaScript() .Add("~/Scripts/jquery-1.7.1.min.js") .Add(string.Format("~/Scripts/{0}/ckeditor.js", DebugSettings.CkEditorFolder)) .Render("~/Scripts/test_#.js")) 
     ckeditor.      build.bat.         ,    ckeditor-dev. 
  TestApp    build.bat  Post-build event: 
  
 
 call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts 
  ckeditor    ,   ,          ckeditor  : 
 ::call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts 
      csproj    ckeditor  msbuild.  . 


true - dev
false - release

web- Scripts ckeditor-dev . dev ckbuilder, , ckbuilder :
- build.bat
- build.js
- ckbuilder.jar

build.bat:
@ECHO OFF CLS java -jar %1\ckeditor-dev\ckbuilder\ckbuilder.jar --build %1\ckeditor-dev %1\ckeditor --build-config %1\ckeditor-dev\ckbuilder\build.js --version 4.2.2 --no-zip --no-tar --overwrite XCOPY %1\ckeditor\ckeditor\* %1\ckeditor /e /i RD %1\ckeditor\ckeditor /s /q
DebugSettings:
public static class DebugSettings { public static string CkEditorFolder { get { if (HttpContext.Current.IsDebuggingEnabled) { return "ckeditor-dev"; } return "ckeditor"; } } }
ckeditor :
<script type="text/javascript"> var CKEDITOR_BASEPATH = '@Url.Content(string.Format("~/Scripts/{0}/", DebugSettings.CkEditorFolder))'; </script> @MvcHtmlString.Create(Bundle.JavaScript() .Add("~/Scripts/jquery-1.7.1.min.js") .Add(string.Format("~/Scripts/{0}/ckeditor.js", DebugSettings.CkEditorFolder)) .Render("~/Scripts/test_#.js"))
ckeditor. build.bat. , ckeditor-dev.
TestApp build.bat Post-build event:


call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts
ckeditor , , ckeditor :
::call $(SolutionDir)TestApp\Scripts\ckeditor-dev\ckbuilder\build.bat $(SolutionDir)TestApp\Scripts
csproj ckeditor msbuild. .