CKEditor 4の開発バージョンを使用します

多くの場合、CKEditorにいくつかの変更を加える誘惑があります。プラグインをそこに追加し、ニーズに合わせて構成します。 このすべての利点により、CKEditorは少し血になります。 これらはすべて、 CKEditor 4のドキュメントに記載されています。 この投稿では、CKEditor 4の開発バージョンを使用する方法、開発バージョンからリリースバージョンを取得する方法、スプライトのカスタムプラグインアイコンを含むスクリプトを圧縮する方法などについて詳しく説明します。

記事の最初の部分は特定の技術に結び付けられておらず、CKEditorコレクターの仕事に興味がある人にとって有用であるという事実に注目したいと思います。

私は猫の下で興味があるすべての人に尋ねます。



gitリポジトリからCKEditor 4のソースを取得できます: github.com/ckeditor/ckeditor-dev

また、サイトで提供されるインターフェースを使用するか、構成ファイルbuild-config.jsをダウンロードすることにより、特定の構成ckeditor.com/builderでdevバージョンをダウンロードできます。 このファイルの目的については後で詳しく説明します。



それでは始めましょう。 gitリポジトリからckeditor-devをダウンロードします。 内部には、これらのソースを試すことができるサンプルフォルダーがあります。 開発バージョンからリリースバージョンをビルドするには、CKBuilderが必要です。 dev / builderフォルダーにあります。 内部には、build-config.jsとbuild.shという2つの重要なファイルがあります。



build.shを実行し、作成されたckbuilderフォルダーを見つけます。このフォルダーにはckbuilder.jarがあります。

CKEditorをビルドするには、ckbuilder.jarを必要なパラメーターとともに使用する必要があります。 --helpスイッチを使用すると、CKBuilderオプションについて学習できます。

> java -jar ckbuilder.jar --help







組み立てプロセスは次のとおりです。

ckbuilderは起動後、必要なすべてのファイルの存在を確認します。 次に、ビルドプロセスが開始され、ckbuilderはbuild-config.jsからすべてのプラグインを1つのckeditor.jsファイルに収集します。 その後、縮小プロセスが開始され、すべてのファイルが変更および縮小されます。



重要:ビルドプロセス中のCKBuilderは、ckeditor.jsに、build-config.js構成ファイルから指定したすべての必要なファイルとプラグインを含めます。



アセンブリプロセスのすべての手順がコンソールに表示されます。 デフォルトでは、Ready ckeditorはリリースフォルダーにあります。



build-config.jsとは何ですか?



このファイルには、標準のwysiwyg'a設定と、単一のckeditor.jsファイルにアセンブルされるすべてのプラグインのリストが含まれています。 例:

 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 } };
      
      





アセンブリにプラグインを含めるには、パラメーター1を使用してその名前をリストに追加する必要があります。

無視では、リリースバージョンで表示したくないファイルとフォルダーを追加できます。 たとえば、この配列にckbuilderフォルダーを含めました-リリースには含まれません。 ignoreに含まれていないすべてのファイルとフォルダーはリリースバージョンに含まれ、すべてのjsファイルは最小化されます。 ファイルを最小化せずに残したい場合は、次の行を挿入します。

// %LEAVE_UNMINIFIED% %REMOVE_LINE%







CKBuilderディレクティブの詳細



CKBuilderは、ソースフォルダーから結果のフォルダーにファイルを1つずつコピーします。 彼は、テキストファイル内の文字(ディレクティブ)の特別な組み合わせを検索し、それに応じて処理します。

いくつかのディレクティブ:

%VERSION%



-アセンブリのバージョン(--versionスイッチを使用して挿入できます)。

%TIMESTAMP%



-36文字の10進数システムでの4文字の年+月+日+時間(YYMMDDHH)の連結。 (たとえば、87bm == 08071122)。

%REMOVE_LINE%



-行を削除します。

%REMOVE_START%



%REMOVE_END%



-ディレクティブ自体を含む、%REMOVE_START%と%REMOVE_END%の間のすべての行を削除します。

%LEAVE_UNMINIFIED%



-このディレクティブが圧縮されていないファイルを残します。 (次のように使用します: // %LEAVE_UNMINIFIED% %REMOVE_LINE%







スプライトにはカスタムプラグインのアイコンが含まれています。



サーバーリクエストの数を減らすために、スプライトにカスタムプラグインアイコンを含めることができます。 これを行うには、次を実行します。

1.スキンのあるフォルダーで、アイコンフォルダーを作成し、そこにpng形式のアイコンを追加します。 アイコンファイルの名前は、プラグインの名前と一致する必要があります。 名前に関する問題を回避するには、アイコンファイルに小文字の名前を付けることが最善です。

2.プラグインのあるフォルダーに、アイコンフォルダーも作成します。 そこにこのプラグインのアイコンを配置します(ファイル名は小文字であることが望ましい)。

これで十分です。 しかし、開発版でアイコンが機能するためには、スキンを含むフォルダー内のskin.jsファイルを変更する必要があります。 このファイルで次の行を見つけます。

// 4. Register the skin icons for development purposes only





次に、以下の関数のコメントを外します。 アイコンで、カスタムプラグインアイコンを追加します。

  (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' ); } })();
      
      





スキンの操作の詳細については、ドキュメントをご覧くださいdocs.cksource.com/CKEditor_4.x/Skin_SDK



SquishItを使用して、圧縮されたckeditor.jsをバンドルに追加します



「圧縮」を簡単にするために、圧縮されたckeditor.jsを追加して、 SquishItの .Netライブラリを使用してバンドルすることを検討してください

ckeditor.jsファイルをバンドルに含めようとしています:

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





その結果、多くのjavascriptエラーが発生します。



その理由は、ckeditorがこれらのファイルを現在の場所に関連して検索しようとしているためです。 問題は非常に簡単に解決されます。 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"))
      
      







ASP.NET MVCフレームワークでのCKEditor 4ビルドの自動化



このセクションでは、ASP.NET MVCフレームワークでCKEditor 4のアセンブリを自動化するためのオプションの1つを示します。 web.configのパラメーターに応じて、プロジェクトでこのバージョンまたはそのバージョンのckeditorを使用するようにします。

 
      

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. .







All Articles