背景:
クロム等近代的なブラウザを使用しているときにバックグラウンドの記事は写真と記事のワードコピーから大きなチャンクを必要に追加するときに、会社のプロジェクトは、需要、フラッシュが無効になっている、リードエディタ画面ダンプ機能は使用できません。
A.エディタが見つかっ貼り付けられた単語記事を構成した後、画像が空白になって
参考
https://blog.csdn.net/lddtime/article/details/79272693
----------------
元、デフォルトueditorがXSSフィルタリングオン(フィルタを入力し、フィルタリングし、フィルタ出力は、対応するスイッチの構成を有している)、及び場合ホワイトリストはwhitList変換任意のプロパティのラベルが失われることはありません。
これは特殊なタグを使用したり、音楽、挿入アンカー、写真や他のダンプを挿入するなどの直接の機能不全を、属性の必要性の一部に直接つながりました。
最も直接的な解決策をしているXSSフィルタを閉じて、あなたはfalseに上記の設定や、上記の3セットをコメントアウトすることができ、別の解決策は、することであるホワイトリストに必要なタグや属性を追加します。
タグの属性名を追加するアンカーの必要性、IMGタグに追加属性anchorname挿入
ロールオーバーのimgタグに追加する画像ニーズword_img、スタイル属性を
設定ファイルでは ueditor.config.js
IMG下の設定に加え、プロパティを見つけます
// XSSフィルタは、他の操作inserthtml、オンになっている xssFilterRules、:trueに // フィルタXSS INPUT 、inputXssFilter:trueに // 出力XSSフィルタ 、outputXssFilter:trueに // XSSフィルターホワイトリスト一覧出典:https://raw.githubusercontent.com /leizongmin/js-xss/master/lib/default.js 、whitList:{ A:[ '対象'、 'HREF'、 'タイトル'、 'クラス'、 'スタイル' ]、 略称:[ 'タイトル'、」クラス、 'スタイル' ]、 // ...一部を省略 I:[ 'クラス'、 'スタイル' ]、 IMG:[ ' SRC'、 'アルト'、 'タイトル'、 '幅'、 '高さ'、'ID'、 '_src'、 'loadingclass'、 'クラス'、 'データラテックス''word_img'、 'スタイル' ]、 イン:[ '日時' ]、 // ...部分省略 ビデオ:[ '自動再生'、 'コントロール'、 'ループ'、 'プリロード'、 'SRC'、「高さ」、 '幅'、 'クラス'、 'スタイル' ] }
第二に、ディスプレイは映像ダンプダンププロンプトの写真やボタンに対応するが、ヒントは、オープンFLASHの初期化に失敗したポップではあるが、チェックFLASHプラグインが正しくインストールされています!瞬間を見つけるためにインターネットがWordPasterプラグインを解決することができますがありますが、あなたはインストールする必要があり、優雅さを感じることはありません。
エディタは、画像アップロード機能が付属して、あなたはオーバー転用されなければなりません。アイデアは、フラッシュとブラウザを使用することができますフラッシュで画像のダンプは、フラッシュモードは、H5のアップロードでサポートされていないようにすることです。
1.画像は、対応するスタイルとスクリプトファイルをアップロードポップなどのスタイルを変更するには、ポップページの導入をダンプし、対応する言語パラメータをコピーするための言語パックファイルを
2.次のように関連するコア・コードであります
ページ、変更をポップwordimage.html:対応するアップロードされたファイルのスクリプトとスタイルの導入、HTMLの構造をアップロードする必要があると、それがああ、独自のスタイルを必要とする変更
// ...部分省略 < スクリプトタイプ= "テキスト/ javascriptの" SRC = "../ internal.js" > </ スクリプト> <! - jqueryの- > < スクリプトタイプ= "テキスト/ javascriptの" SRC = "../../third-party/jquery-1.10.2.min.js" > </ スクリプト> <! - webuploader - > < スクリプトSRC =」../../サードパーティ/ webuploader /webuploader.min.js " > </ スクリプト> < リンクのrel = "スタイルシート" タイプ="テキスト/ cssの」 HREF = "../../サードパーティ/ webuploader / webuploader.css" > <! - 添付ファイルダイアログ- > < リンクのrel = "スタイルシート" のhref = "attachment.css" タイプ= "テキスト/ cssの" / > < スタイルタイプ= "テキスト/ cssの" > // ...部分省略 の<divのid = "flashContainer"> </ div> <! -上传图片- > <DIV ID = "uploadH5"クラス= "パネル"> <div要素のid =" queueList」クラス= "queueList"> <DIV CLASS = "statusbar要素-目に見えません"> <DIV CLASS = "進歩"> <スパンクラス= "テキスト"> 0%</ span>の <スパンクラス= "割合"> </ span>を <ulのクラス= "ファイルリスト要素-目に見えません"> </ DIV> <DIV CLASS = "情報"> </ div> <divのクラス= "btns"> <div要素のid = "filePickerBtn"> </ div> <divのクラス= "uploadBtn"> <VARのID = "lang_start_upload "> </ VAR> </ div> </ div> </ div> <DIV ID =" dndArea」クラス= "プレースホルダ"> <DIV CLASS = "filePickerContainer"> <DIV ID = "filePickerReady"> </ DIV > </ div> </ div> <李ID = "filePickerBlock"クラス= "filePickerBlock"> </ LI> </ UL> </ div> </ div> <div>の <DIV ID = "アップロード"スタイル= "表示:なし"> <IMGのid = "uploadBtn"> </ div> // ...部分省略 ます。<script type = "text / javascriptの" SRC = "tangram.js" > </ SCRIPT> ます。<script type = "text / javascriptの" SRC = "wordimage.js"> </ SCRIPT> ます。<script type = "text / javascriptの" SRC = "attachment.js"> </ SCRIPT> <スクリプトタイプ= "テキスト/ javascriptの"> // ...部分省略
ファイルattachment.jsをアップロードするはじめ、変更:初期化;アップロードされたファイルはカウント;ファイルのリストが正常にアップロード
window.onload = 関数(){ / * initTabs()。 initButtons(); * / uploadFile = uploadFile || 新しいUploadFile( 'queueList' ); }。 // ...部分省略 uploader.on( 'すべて'、関数(タイプ、ファイル){ selectedImageCount = uploadFile.getQueueCount(); スイッチ(タイプ){ // ...部分省略 uploader.on( 'uploadSuccess'、機能(ファイル、RET){ VARの $ファイル= $( '#' + file.id); 試み{ VAR responseText =(ret._raw || RET)、 JSON= utils.str2json(responseText)。 もし(json.state == 'SUCCESS' ){ _this.fileList.push(JSON)。imageUrls.push(JSON)。 $ file.append( '<スパンクラス= "成功"> </スパン>' ); } 他{ $ file.find( '.ERROR' )の.text(json.state).SHOW(); } } キャッチ(E){ $ file.find( '.ERROR' )の.text(lang.errorServerUpload).SHOW(); } })。
wordimage.js、修正:H5は、アップロードされたカウントは、ファイルのアップロードなかったロジックを促し、フラッシュが無効になっているときH5が表示さに応じて、アップロード、H5コピー
// ...一部省略 dialog.onok = 機能(){ IF(selectedImageCount){ $( '情報'、 '#QueueList')HTML( '<スパンのスタイル= "色:赤;">'。+ 'アップロードされていない2つのファイル'.replace(/ [\ D] /、selectedImageCount)+' </ span>にある';) falseに復帰; } IFは!(imageUrls.length)リターン; VAR URLPrefix = editor.getOpt(' imageUrlPrefix " )、 // ...一部を省略 flashObj = 新新baidu.flash.imageUploader(オプション); flashContainer = $ G(opt.container); IF(baidu.swf.version){! $(flashContainer).htmlを($( "#uploadH5")addClass( "フォーカス")。) } // ...部分省略 場合(クリップボード&& clipboard.flashInit){ てclearInterval(clipinterval)。 clipboard.setHandCursor(真の); clipboard.setContentFuncName( "getPasteData" ); // clipboard.setMEFuncName( "mouseEventHandler"); }他{ VAR BTN =のdocument.getElementById(ID)。 btn.onclick =関数(){ VAR URL2 =のdocument.getElementById(dataFrom)。 Url2.select(); //选择对象 document.execCommand( "コピー"); //実行ブラウザのコピーコマンド getPasteData(dataFrom); } }
概要:画像は、ダンプルックXSSフィルタがオンになって取る、ホワイトリストプロパティを増やす必要がない場合は、フラッシュをクロム無効、あなたは組み込みのH5アップロードを使用することができます