記事の最初の部分は特定の技術に結び付けられておらず、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. .