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をもっとサポートすることを願っています。