Kindeditorは、WysiWygの編集効果をサポートする強力なオープンソースのオンラインHTMLエディターです。 JavaScriptで書かれており、.NET、PHP、ASP、Javaなどの複数の異なるロケールとシームレスに統合できます。公式Webサイトはhttp://kindethitor.net/index.phpで見ることができます。
Kindeditor自体は多くの非常に実用的なプラグインを提供し、コードはオープンソースであるため、開発者は必要に応じて拡張および変更できます。
Kindeditorを使用してWebサイトのコンテンツを編集するときは、このシナリオを考慮してください。編集者は、空白の紙からコンテンツを書くのではなく、他のページまたは単語ドキュメントからKindeditorエディターにコンテンツをコピーする傾向があります。コピーされたコンテンツに画像が含まれている場合、最初にソースアドレスからローカルエリアに画像をダウンロードして、このWebサイトがあるサーバーにアップロードする必要があります。そうしないと、画像は引き続きコピーしたページまたはドキュメントを指します。編集者はしばしば多くのドキュメントを処理する必要があり、そのような操作は間違いなく非常に面倒です。 Kindeditorは、貼り付けられたコンテンツを自動的に認識して、サーバーに画像をアップロードできますか?次のコードはこの機能を実装します。
ページでKindeditorの使用方法の詳細については、公式Webサイトのドキュメントを表示できます。
この関数を実装するという基本的なアイデア:Kindeditorエディターのキーアップイベントにコードを追加して、編集者に写真が含まれているかどうかを確認します。サーバーに自動的にアップロードする必要がある写真を見つけて、Ajaxを介して画像アップロードプログラムを呼び出して、写真をサーバーにアップロードします。 AJAXコールバック関数では、対応する画像のSRCアドレスをローカル相対アドレスに変更します。
この機能は、ワードで画像のコピーとアップロードをサーバーにサポートしていません。
上の写真は最終結果です。プログラムは、エディターのコンテンツを自動的に認識します。アップロードする必要がある写真がある場合、編集者の上部にプロンプトメッセージが表示されます。ユーザーが「アップロード」リンクをクリックすると、プログラムはAJAXリクエストを使用して画像アップロードプログラムを呼び出し、対応する画像のSRCアドレスをコールバック関数のローカル相対アドレスに変更します。
特定の実装手順と関連コード:
1. Kindeditor Editorの変更
Kindeditor.jsファイルを見つけて、keyup()イベントにカスタムコードを追加します。 Kindeditorのさまざまなバージョンによって提供されるコードは大きく異なり、公式文書の助けを借りて検索が必要になる場合があります。この記事は、Kindeditorバージョン4.1.10に基づいています。
2。AUTO.JSファイルコード
function df(){var haspiccontainer = document.getElementById( "has_pic"); if(has_pic "== null){haspiccontainer = document.createelement(" div "); haspiccontainer.id =" has_pic "; haspiccontainer.innerhtml =" <入力タイプ= 'テキスト' id = 'piclist' value = ''スタイル= 'サーバーへ> upload </a> </div> <div id = 'cundile'> </div> "; $("。ke-toolbar ") (that.attr( "src").indexof( "http://")> = 0 || aTtr( "src").indexof( "https://")> 0){piccount ++; $ closeupload(){$(has_pic ")。 「pic = " +" get "、befersend("#upload ") $( "。ke-edit-iframe")。contents()。 thattr( "src"、 "/uploads/" + str [i]); href = 'javascript:closeupload();'> close </a> ");} else $("#cundile ")。$( "。ke-edit-iframe")。contents()デフォルトでは、エディターのコンテンツは、class = "ke-edit-iframe"のプロパティを持つiframe要素に保存されます。プログラムは、各画像SRC属性の値に「http://」または「https://」が含まれているかどうかを決定し、それによって画像がリモート画像かローカル画像であるかを決定します。画像がリモート画像の場合、uploadpic.ashxはjqueryのajaxメソッドによって呼び出され、サーバーにアップロードされます。同時に、コールバック関数の対応する画像のSRCアドレスを変更します。
3。UploadPic.ASHXファイルコード
public class uploadpic:ihttphandler {public void processRequest(httpcontext context){context.response.contenttype = "text/plain";文字列pic = context.request.querystring ["pic"]; string [] arr = pic.split( '|');文字列str = ""; uploadimg st = new uploadimg(); for(int i = 0; i <arr.length; i ++){if(arr [i] .indexof( "http://")> = 0 || arr [i] .indexof( "https://")> = 0){string std = st.saveurlpics(arr [i]、 "../..//uploads/image/"); if(std.length> 0){if(i == arr.length -1)strr += std; else strr + = std + "|"; }}} context.response.write(sstr); } public bool isReusable {get {return false; }}} public class uploadimg {public string saveurlpics(string imgurlary、string path){string strhtml = "";文字列dirpath = httpcontext.current.server.mappath(path); try {if(!dirctory.exists(dirpath)){directory.createdirectory(dirpath); } string ymd = datetime.now.tostring( "yyyymmdd"、datetimeformatinfo.invariantinfo); dirpath + = ymd + "/"; if(!dirctory.exists(dirpath)){directory.createdirectory(dirpath); } string newFileName = dateTime.now.toString( "yyyymmdhhmmss_ffff"、datetimeformatinfo.invariantinfo) + imgurlary.substring(imgurlary.lastindexof( "。"。 ")); webclient wc = new webclient(); wc.downloadfile(imgurlary、dirpath + newFileName); strhtml = ymd + "/" + newFileName; } catch(Exception ex){// ex.messageを返します。 } return strhtml; }}リモート画像は、WebClientメソッドを介してサーバーの相対パス「/uploads/Image/」にダウンロードされ、フォルダーと対応するファイル名は日付に従って自動的に生成されます。返された結果には、「|」で区切られたすべての写真のローカル相対アドレスが含まれています。ステップ2のauto.jsファイルのuploadPic()関数では、コールバックメソッドの成功が値を取得し、解析し、対応する画像のSRC属性にアドレスを割り当てます。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。