2日後、CkeditorとCkfinderはついに画像アップロード機能を統合しました。
ここでは私の経験について書きます。
ニュースの編集モジュールを実装するために、兄がCkeditorを紹介してくれました。
まず、http://ckeditor.com/ でCkeditorの.net版をダウンロードしてください。私はckeditor_aspnet_3.6.4を使っています。
ダウンロード後、解凍して開いてください。 でも、ここにあるものがすべて役に立つわけではないので、書いてもいいです
ここでサンプルは例、ソースはソースファイルです
、直接削除済み
目的はエディターのボリュームを減らすことです。 その後、フォルダ全体をウェブサイトのルートディレクトリに直接コピーします。 引用
ckeditro.net.dll
エディターコントロールを使う必要があるページのヘッダーで:
<scrip remove t src="/ckeditor/ckeditor.js" type="text/javascrip remove t" ></scrip去掉t>
<scrip remove t type="text/javascrip remove t" >
window.onload = function () {
CKEDITOR.replace("txtContent");
}
...</scrip去掉t>
ボディ
：
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor/" runat="server">
</CKEditor:CKEditorControl>
バックグラウンドコードもシンプルです:
記事。 記事内容 = CKEditor1.テキスト; これにより、編集されたコンテンツは記事のモデルクラスのARTICLECONTENTフィールドに割り当てられます。
これで私の編集者は無事に完成しました!
しかし、再び大きな問題が起きています。それはCkeditorが画像をアップロードできないことで、本当に頭痛の種です。 どうやってこれを実現するのでしょうか? 百度に行け。
ネットに入った瞬間、解決方法はいろいろあると分かりました。中には、エディターの外に画像をアップロードする関数を作成し、サーバーに渡されたときにサーバーのリンクパスを現在のエディターのカーソルに渡し、それを実装して実行すると、外部アップロード画像をクリックするとカーソルがエディターに全く存在しないことが突然起きるというものもあります。どうすればいいでしょうか??? 考えてみてください。残念ながら、今の知識ではできません。諦めるしかありません。 (もし神様が知っているなら、メッセージを残して教えてください、ありがとうございます); この関数を実装するために自分でJSを書き、それをエディターに入力して完成させるという人もおり、そのような記事はたくさんあります。
1、 http://www.cnblogs.com/lts8989/archive/2011/08/04/2127326.html
2、 http://www.cnblogs.com/striiiiing/archive/2012/08/15/2640792.html
この2つの記事はかなり良いと思いますが、自分のJS知識が弱いので書こうとしましたが、それでもうまく実装できませんでした。
どうやらCkeditorはCkfinderと統合するしか使えないようで、Ckfinderは充電されているので使いたくなかったのです。これは良くありません!! でもどうしたの?公式サイトに載っていないのは良いことです。インターネットのリソースに直接アクセスしてみたら、ようやく非常に詳細なリソースを提供しているものを見つけました(ここで兄弟たちに感謝したいです!!) ウェブサイト:http://download.csdn.net/download/q8347901/3887066(CkeditorやCkfinderに関する詳細な紹介記事もこちらにあります。とても良いです!) ）
Ckfinderをダウンロードし、/binディレクトリからckfinder.dllファイルをサイトのbinディレクトリにコピーし、さらにckfinderディレクトリをサイトのルートディレクトリにコピーします(別のパスを選べます)、ckfinder.dllを参照します
これを設定してください:
もしあなたがckeditorしたい.aspxページにいるなら、以下の通りです:
CKEDITOR.replace('編集を有効にしたいテキストボックス',
{
filebrowserBrowseUrl:'/ckfinder/ckfinder.html',//启用浏览功能
filebrowserImageBrowseUrl:'/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl:'/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl:'/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
filebrowserImageUploadUrl:'/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl:'/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
}
);
もちろん、グローバル構成法を使いましょう
Ckeditorプラグインのconfig.jsで設定
config.filebrowserBrowseUrl="/ckfinder/ckfinder.html";
config.filebrowserImageBrowseUrl="/ckfinder/ckfinder.html? Type=Images";
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";
設定後、ckfinderでconfig.ascxを修正してください。
CheckAuthentication()in はtrueを返すため、そうでなければアップロードされず、検証が必要です
SetConfig()のBaseUrlへのパスはアップロードのパスです
また、注意深くなったらckfinderのBLLファイルを参照するのを忘れないでください
さて、統合と画像のアップロードは無事に完了しました。
あるいは、画像パネルのハイパーリンクやアドバンスタブを隠したい場合は、CKEditorのプラグイン/画像/ダイアログ/image.jsで設定できます
「id:'Link」と「id:'advanced」で「Link」と「advanced」を検索し、「hidden:true」を追加してください。ただそうしてください。
見た目を改善し、ウェブサイトを最適化したいなら、以下の記事をご覧ください。
1、 http://www.cnblogs.com/netec/archive/2009/11/02/ckeditor_ckfinder.html
2、http://blog.csdn.net/lulu_jiang/article/details/5532345
3、 http://blog.csdn.net/hzq1074/article/details/5893475 |
掲載地 2015/04/17 16:20:20
|
|
|
