CKEditorおよびCKFinderの最新バージョンは公式ウェブサイト(http://cksource.com)からダウンロード可能です。
上記の2つのリソースをウェブサイトのルートディレクトリに入れてください:/CKEditor(バージョン3.6.2では、_Samples\ckeditorフォルダを圧縮フォルダに入れる必要があります)と/CKFinder(大文字を区別せず、フォルダを直接ここに置くことができます)。 )
ここでは、生成に誤りが起こることがあります。 例えば、AssemblyTitleタイプのタグが重複しているのは、ウェブサイトにダウンロードしたファイルを削除するための複数のAssemblyInfo.csがあるためです。 あるいはフォルダを削除_source。 ここで質問があれば、私のQQ: 515072775までご連絡ください。
ページ上でCKEditorを使う:
<textarea cols="80" id="prcontent" name="content" rows="50"> こんにちは、あなたの使用は成功しました! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('content', { height:200, width: 520 });
...</scrip去掉t>
CKEditorにはアップロード機能が付属していないため、CKFinderでアップロードする必要があります
ステップ1:ウェブサイトはCKFinderのdllを参照する必要があります(ディレクトリ:/CKFinder/bin/Release/CKFinder.dll)
ステップ2:CKEDITOR.editorConfig関数でCKEditorのconfig.js(ディレクトリ:/CKEditor/config.js)を設定し、不要な機能は削除できます
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; 「~/ckfinder/...」や「/ckfinder/...」と書かないでほしい。
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? タイプ=画像;
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? タイプ=フラッシュ';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
config.filebrowserWindowWidth = '800'; ブラウズサーバーのポップアップのサイズ設定
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); ckfinderの経路は実際の配置に対応していることに注意してください
CKFinderの構成:
ユーザーコントロールのconfig.ascxの「ckfinder\」を開いて、そのBaseUrlパスを変更してください:
BaseUrl = "~/ckfinder/userfiles/"; またはBaseUrl = "ckfinder/userfiles/";
補足点として、IISでテストするのは有用です。 そうでなければ、アップロードが失敗した場合、設定に問題があると思い込んでしまいます。
CKEditorには設定完了後にアップロード機能がありますが、画像ファイルが元の画像名で、ランダムなファイル名に変更したい場合はどうすればいいのでしょうか? 次に第三段階を見てください。
ステップ3:CKFinderのソースコードを修正します。 CKFinderには独自のソースコード、ディレクトリ/CKFinde/_sourceが付属しています
VSでCKFinde/_source/CKFinder.Net.slnに新しい現在のプロジェクトを作成します。ここにダウンロードされた解答ファイルはVS2008では開かない場合があります。新しいプロジェクトを追加するか、新しいVSバージョンを使って開くことができます。
1) /settings/ConfigFile.csファイルを開く
27行を見つけて属性を追加します:public bool RandomReName; ランダムに名前を変更
67行を見つけて、先ほどプロパティに値を割り当てます:RandomReName = true; デフォルト値は
閉じたファイルを保存してください
2) /Connector/Config.csファイルを開く
62行を見つけ、属性を追加します:
パブリックボール RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
閉じたファイルを保存してください
3) /Connector/CommandHandlers/FileUploadCommandHandler.csファイルを開く
64行目を見つけて、判決コードを追加してください:
if (Config.Current.RandomReName) // ランダムな名前を使う
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtension;
閉じたファイルを保存してください
4) プロジェクトの再生成、/ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll を上書きするか、以前に追加されたウェブサイトプロジェクトへの参照を削除し、CKFinder.Net プロジェクトからDLLを再削除する
最後のステップ:/ckfinder/config.ascx を開く
40行を見つけて属性を追加します:(実際、これを追加するかどうかは問題ありません。以前はデフォルト値が設定されていましたが、元の名前を使う場合はfalseに設定しなければなりません)
//上传完毕后使用随机文件名
RandomReName = true;
セーブ終了
さて、設定が成功したので、CKEditorにアップロード機能が使えます。 他の機能の設定は時間があるときに引き続き研究します~
もう一つ注意点:CKEditorやCKFinderフォルダには不要なものが多く、名前にアンダースコアがついたり、.netプロジェクトはphpやASPを必要としません。
ファイルのアップロードにエラーが発生した場合:セキュリティ上の理由からファイルは閲覧できません。 システム管理者にご連絡いただき、CKFinderのプロフィールを確認してください。
config.ascxファイルを修正する必要があります
パブリックオーバーライド BOOL CheckAuthentication()
{
reture false;
}
修正内容:
パブリックオーバーライド BOOL CheckAuthentication()
{
フォーム検証
returnRequest.IsAuthenticated;
}
3. ページにCKEditor制御を適用する[2つの方法、aとb]
[A: 圧縮パッケージのINSTALL.htmlを引用]
CKEditorを ASP.NET ページに統合したい場合は、以下の手順に従ってください。
1. 公式のCKEditorダウンロードサイトにアクセスし、CKEditor 3.xおよび ASP.NET 制御用のCKEditorの最新バージョンをダウンロードしてください。
2. 両方のインストールパッケージを希望する位置にアンパックします。nを削除します。
3. ウェブサイトにCKEditor for ASP.NET Controlへの参照を追加してください。
Visual StudioでAdd Referenceコマンドを使い、アンパックしたCKEditorからbin\Release\CKEditor.NET.dllファイルに移動してインストールパッケージ ASP.NET 行います。 また、DLLファイルをアプリケーションのbinフォルダに手動でコピーすることもできます。
4. CKEditor 3.xインストールパッケージからアンパックされたエディターファイルをコピーし、ウェブサイトのアプリケーションディレクトリに貼り付けます。
5. ASP.NET コントロールのCKEditorを自分のページで登録してください:
<%@ Register assembly="CKEditor.NET" namespace="CKEditor.NET" tagPrefix="CKEditor" %>
6. ページ本文にCKEditorインスタンスを挿入する:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>対応するjs参照をページに追加:
<scrip remove t type="text/javascrip remove t" language="javascrip remove t" src="ckfinder/ckfinder.js"></scrip去掉t>
<scrip remove t type="text/javascrip remove t" language="javascrip remove t" src="ckeditor/ckeditor.js"></scrip去掉t>
2. 次に<body>、コントロールを配置する場所に以下のコードを追加します。以下の利用方法があります。
(1) 指定されたクラス属性をコントロールに追加する
<textarea id="textarea1" name="editor1" class="ckeditor">こんにちは!</textarea>
サーバー制御:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) jsコードをインジェクトする - ここではjsコードはコントロールの後、またはコントロール内に書くのが最適です<head>
<textarea id="textarea1" name="editor1">こんにちは!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { height:400, width:800 });
...</scrip去掉t>
サーバー制御:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
...</scrip去掉t>
=============================================================================================================
二つ目の参考文献:
asp.net ckeditor 3.0.1およびckfinder_aspnet_1.4.1.1の設定方法
http://ckeditor.com.cn/docs/ のプロンプトによると、CKEditorはウェブページで設定されており、ブラウザで見るとCKEditorのインターフェースは確かに美しいと感じますが、画像アップロード機能を試したいと思ったときに画像アップロードボタンが表示されませんでした。
さらにオンラインで調べた結果、結論は「CKEditor自体にはアップロード機能がなく、アップロード機能を実現するにはCKFinderと統合する必要がある」というものでした。
その後、Asp.net 用のCKFinder 1.4.1.1をダウンロードし、解凍してからckfinderフォルダをプロジェクトのルートディレクトリに入れてください。インターネット上の多くの情報源では、CKEditorとCKFinderを同じレベルディレクトリに入れるのが最善だと言われています。 こうして、理由もなくプロジェクトにさらに2つのフォルダが増えることになります。 私自身、コードの清潔さにこだわっていると思います。
著者への敬意の印としてフォルダーを残すだけで十分です。 2匹だけを残すととても居心地が悪くなります。
CKFinderをCKEditorに統合する前に、少し設定する必要があります。 賢い友人なら、アップロード用のプラグインなので、設定すべきものの多くはアップロード経路だと簡単に考えるはずです。
CKFinderのデフォルトのアップロードパスはuserfilesフォルダ内の独立したディレクトリですが、CKFinderはCKEditorフォルダに置いています。画像をuserファイルに保存すると、システムは3層フォルダを迂回してファイルや画像を探す必要があるため、プロジェクトのルートディレクトリにあるupFileフォルダに画像をアップロードする予定です。
この機能を実装するには、CKFinderのconfig.ascxファイルを修正してBaseUrl = "/ckfinder/userfiles/"をBaseUrl = "~/upFile/"に変更する必要があります。 次に、CKFinder/binフォルダのCKFinder.dllファイルをシステムプロジェクトのbinフォルダに切り込みます。 あるいは、リファレンスを追加してCKFinder.dllをプロジェクトに取り入れることも可能です。
次に、ファイルアップロードでCKEditorを使うことができます:
CKFinderフォルダをCKEditorフォルダに入れ、ページ内で両方のjsファイルをインポートします:
<scrip remove tsrc="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascrip remove t"></scrip去掉t>
<scrip remove t src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascrip remove t"></scrip去掉t>
エディタをコントロールに参照する方法は2つあります:
一つはクライアントコントロールテキストエリアを使う方法です:
<textarea rows="20" cols="40" name="txtContent" id="txtContent"></textarea>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(編集者、『http://www.cnblogs.com/ckeditor/ckfinder/』);
...</scrip去掉t>
2つ目はサーバー側の制御テキストボックスを使うことです:
<asp:TextBox id="txtContent" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(編集者、『http://www.cnblogs.com/ckeditor/ckfinder/』);
</scrip去掉t>個人的には、asp.net プログラムなのでサーバー側のコントロールを使うべきだと思います。 クライアント操作よりは少し遅いですが、開発は少し速いです。 そしてプログラマーとして、私たちはいつも好きなものを選ぶ前にあらゆる可能性を試すのが好きです。
実際、Text='<%# Bind("info")%>'を使わずにコントロールに値を割り当て、バックコード内で直接使うことも可能です
this.txtContent.Text="初期価値"
可能性もあります。 また、以下のコードを直接使って値を取得することもできます:
CKFinderとCKEditorのコード。 エディターで直接ページを実行すると、コンパイラが以下のエラーを出します:
文字列 content=this.txt内容.Text
注意:TextMode="MultiLine" 属性は必須で、そうでないと値がnullになります。
プログラムのデバッグ前に整理しませんでした
「ControlDesigner」という型または名前空間名は「System.Web.UI.Design」という名前空間には存在しません(アセンブリ参照が欠けているのでしょうか?)
ミスはckeditor\ckfinder\_source\FileBrowserDesigner.csの19行目にあるので、ファイルを簡略化してください:
最初のステップはckeditorの効率化です。_samplesと_sourceフォルダを削除し、langディレクトリに保持できる言語ファイルはen.js、zh.js、zh-cn.jsの3つだけです。
次のステップはckfinderを効率化することです:_samplesと_sourceフォルダを削除し、en.js、zh.js、zh-cn.js言語ファイルだけをlangディレクトリに残します。
ここに2行目のjsコードを参照してください:CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); ここで「http://www.cnblogs.com/ckeditor/ckfinder/」はckfinderから現在のページへの相対経路です。
コードを直接コピー&ペーストしないでください。画像アップロード時に以下のエラーが出る可能性があります。
説明:HTTP 404。 あなたが探しているリソース(またはその依存関係の一つ)が削除されているか、名前が変わっているか、一時的に利用できていない可能性があります。 以下のURLを確認し、正しく綴られているか確認してください。
リクエストURL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
ですので、私のようにckfinderをckeditorフォルダに入れたくなくても、ここでパス変更を正しく埋めていれば問題ありません。
これで全部の作業だと思っていましたが、画像をアップロードしたら次のプロンプトが表示されました:
セキュリティ上の理由から、そのファイルは閲覧できません。 システム管理者にご連絡いただき、CKFinderのプロフィールを確認してください。
ことわざにあるように、良いものは食べるのが難しいわけがない。 最高の先生、バイドゥにしか聞けません。 上記のプロンプト情報をバイドゥの検索ボックスにコピーし、車に乗るとPHP統合ckeditorに関する投稿を見つけました。 やり方は以下の通りです:
CKFinderのconfig.ascxファイルを修正し、public override bool CheckAuthentication()関数の返却値をreturn falseからreturn trueに変更します。
再度テストしたところ、画像は正常にアップロードされました! |
掲載地 2015/04/18 19:11:55
|
|
|
