最近、プロジェクトの要件により、写真のリアルタイムアップロードの機能を備えたフロントエンドテキスト編集ボックスが必要です。オンラインでいくつかのプラグインを比較しました。第一に、それはバイドゥのueitorであり、フレームワークが大きすぎることを発見しました。小さなフレームワークが非常に多くのファイルを導入したかどうかを確認したかったのではありませんでした。第二に、それはjqueryのeasyuiでした。個人版は無料ですが、プロジェクトは会社のビジネスに属しており、フレームワークの商用バージョンを使用することは適切ではないようです。プロジェクトのフロントエンドが主にBootstrap上に構築されていることを考慮すると、Bootstrap-WysiWygプラグインが最終的に選択されました。これは非常にシンプルで、軽量で非常に拡張可能です。
Bootstrap-WysiWygを導入し、テキスト編集機能を実装することは非常に便利ですが、FileApiを使用して画像のアップロードが実装されていることに気付きました。ほとんどのWebサイトでは、アップロードせずにユーザーエクスペリエンスはFileapiで非常に優れていますが、実際にデータベースに保存されている場合、弦楽型画像ではなくサーバーに画像の静的パスを保存することを望んでいます。要するに、Bootstrap-WysiWyg（以下、WYと呼ばれる）を少し書き直す必要があります。
まず、ページ上の画像コントロールを観察しましょう。他のコントロールをスキップし、ソースコードを確認します。次のコードを簡単に見つけることができます。
<div> <a id = "picturebtn"> <i> </i> </a> <入力タイプ= "file" data-role = "magic-overlay" data-target = "＃picturebtn" data-edit = "insertimage"/> </div>
説明しましょう。データロールとデータターゲットプロパティは、ブートストラップの事前定義されたイベントです。ここでは、それを考慮せずにレイアウト関連として理解できます。キーポイントはこちらです。 3番目のプロパティData-Edit、Bootstrapにはそのようなイベントはありません。 bootstrap-wysiwyg.jsを観察すると、次のようなコードを見つけることができます。
toolbar.find（ 'input [type = file] [data-' + options.commandrole + ']'）.change（... ... commandrole： 'edit'、
言い換えれば、このプロパティは実際には選択者を容易にするために実装されています。これは、リスナーイベントを画像ボタンに追加するのと同等です。
WY Image Previewの実装を引き続き調査しましょう。最初のステップは、上記のコードに示されているように、リスナーがFileInputの変更イベントをキャッチし、応答し、InsertFiles関数を呼び出すことです。
restoreSelection（）; if（this.type === 'file' && this.files && this.files.length> 0）{insertfiles（this.files）;} saveselection（）; his.value = '';insertFiles関数を見つけます
insertFiles = function（files）{editor.focus（）; $ .each（files、function（idx、fileinfo）{if（/^image//.test(fileinfo.type））{$ .when（readfileintodataurl（fileinfo））。 option.fileuploaderror（ "file-reader"、e）; }最初にreadfileintodataurlメソッドと呼ばれるjqueryの$ .deferred（）メソッドを使用してから、自己カプセル化されたexecomandメソッドを介して画像をテキストボックスに正常に出力することに気付きました。この写真は実際には<img>タグですが、SRC属性は文字列で表される画像です。したがって、リスナーがトリガーされた後に実際にファイルをアップロードし、写真のSRCを取得してから、後続のexecCommandメソッドへのリンクを引き渡すことです。
著者は延期にあまり精通していないので、彼はまだより一般的なコールバックモードを使用しています
ajaxfileuploadの呼び出し方法を観察します：
$ .ajaxfileupload（{url：...、secureurl：false、fileElementId：...、datAtype： "json"、success：function（obj）{...}、error：function（）{...}}）;URLとFileElementIDの2つの必要なプロパティがあります。依存関係の正しさを維持するには、AjaxFileuploadを書き換えることはお勧めできません。ただし、WYコントロールはリスナーによって実装されているため、関数を介してパラメーターを渡すことは非現実的であるため、目標を達成するために入力ボックスのプロパティを定義する必要があります。
FileInputにいくつかのプロパティを追加します
<入力型= "file" id = "pictureInput" name = "picture" data-role = "magic-overlay" data-target = "＃picturebtn" data-edit = "insertimage" action = "..." />
IDはFileElementIDとして使用され、主にバックグラウンド値の選択には、名前の属性も必要です。アクションは、画像を提出する必要があるURLです。
bootstrap-wysiwyg.jsの関数をuploadfiletoserverと定義します。関数形式は次のとおりです。
var uploadFileToserver = function（id、action、callback）{$ .ajaxfileupload（{url：action、secureurl：false、fileelementid：fileelementid：id、datatype： 'json'、success：function（obj）{if（obj.status）{callback）{obj.imgsrc）;他のoption.fileuploaderror（ "server-internal-exception"、obj.message）、function（）{options.fileuploaderror（ "upload-failure"、 "}）;insertFilesメソッドを次のように書き換えます。
insertFiles = function（files、id、action）{editor.focus（）; $ .each（files、function（idx、fileinfo）{if（/^image //.test(fileinfo.type））{/ * * $ .when（readfileintodataurl（fileinfo））。 option.fileuploaderror（ "file-reader"）;同時に、リスナーに特定の変更を行い、必要な属性を取得する
toolbar.find（ 'input [type = file] [data-' + options.commandrole + ']'）.change（function（）{restoreselection（）; if（this.type === 'file' && this.files && this.files.length> 0）{this.files（this）.attr（ 'id' '' inact（ 'inact'）、$（ 'incer saveselection（）;主に、2つのパラメーター位置が追加されました。
このようにして、書き換えは完了しました。正しい実行が実行されることを確認するには、コントロールの前にajaxfileupload.jsを参照してください。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。