배경 :
크롬과 같은 현대적인 브라우저를 사용할 때 배경 기사가 사진과 함께 기사의 단어 복사본에서 큰 덩어리를 필요에 추가 할 때 회사 프로젝트, 요구, 플래시가 비활성화되어, 리드 에디터 사진 덤프 기능을 사용할 수 없습니다.
에디터 구성 발견 붙여 단어의 기사 후 A., 사진이 비어 있습니다
참조
https://blog.csdn.net/lddtime/article/details/79272693를
----------------
원래 기본 ueditor은 (필터를 입력 필터 출력은 해당 스위치 구성을 가지고 필터링) 필터링 XSS를 돌고, 어떤 속성의 레이블은 화이트리스트 whitList 변환 손실되지 않습니다.
이것은 앵커, 사진 및 기타 덤프 삽입, 음악을 삽입 등의 특수 태그 또는 직접 기능 장애 속성을 사용할 필요의 일부에 직접했다.
가장 직접적인 솔루션입니다 XSS 필터를 닫습니다 당신은 위의 구성 또는 false로 위에서 언급 한 세 가지 설정을 주석 수, 다른 해결책은하는 화이트리스트에 필요한 태그와 속성을 추가합니다 .
태그 속성 이름을 추가하는 앵커의 필요성을 삽입, 속성은 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에 ','Alt 키 ','제목 ','폭 ','높이 ''ID', '_src', 'loadingclass', '클래스', '데이터 라텍스''word_img', '스타일' , 기능 : [ '날짜' , // ...部分省略 비디오 : [ '자동 재생', '컨트롤', '루프', '프리로드', 'SRC'를 '높이 ','폭 ','클래스 ','스타일 ' ] }
둘째, 디스플레이 화면 덤프 덤프 메시지에 사진 및 버튼에 해당하지만, 팁, 열린 플래시 초기화가 실패 팝 있지만 체크 플래시 플러그인이 제대로 설치! 인터넷은 플러그인이 해결 될 수있는 WordPaster에게이 순간을 찾을 수 있습니다,하지만 당신은 우아함을 느끼지 않는다, 설치해야합니다;
에디터 사진 업로드 기능이 있습니다, 당신은 이상 전환해야합니다. 아이디어는 플래시 브라우저를 사용할 수있는 플래시에서 사진 덤프, 플래시 모드가 H5 업로드를 지원하지 않습니다 확인하는 것입니다.
1. 사진은 해당 스타일과 스크립트 파일을 업로드 팝업과 같은 스타일을 수정할 수있는 팝업 페이지 소개를 덤프, 해당 언어의 매개 변수를 복사 할 언어 팩 파일을
2. 다음과 같이 관련 코어 코드는
페이지 변경 팝업 wordimage.html 다음 해당 업로드 된 파일 스크립트와 스타일의 도입,의 HTML 구조를 업로드 할 필요, 그것은 오 자신의 스타일을 필요로 변경
// ...部分省略 < 스크립트 유형 = "텍스트 / 자바 스크립트" SRC = "../ internal.js" > </ 스크립트 > <! - JQuery와 -> < 스크립트 유형 = "텍스트 / 자바 스크립트" SRC = "../../third-party/jquery-1.10.2.min.js" > </ 스크립트 > ! - < webuploader -> < 스크립트 SRC = "../../ 타사 / webuploader을 /webuploader.min.js " > </ 스크립트 > < 링크 확인해 ="스타일 " 유형 ="텍스트 / CSS는 " HREF = "../../ 타사 / webuploader / webuploader.css" > <! - 첨부 파일 대화 -> < 링크 확인해 = "스타일 시트" HREF = "attachment.css" 유형 = "텍스트 / CSS를" / > < 스타일 유형 = "텍스트 / CSS" > // ...部分省略 <DIV ID = "flashContainer"> </ div> <! -上传图片-> <DIV ID = "uploadH5"클래스 = "패널 "> <div ID ="queueList "클래스 ="queueList "> <div 클래스 ="상태 표시 소자 보이지 "> <div 클래스 = "진행"> <스팬 클래스 = "텍스트"> 0 % </ SPAN> <스팬 클래스 = "비율"> </ SPAN> <UL 등급 = "파일 목록 소자 보이지"> </ div> <div class = 1 회 "정보"> </ DIV> <DIV 클래스 = "btns"> <DIV ID = "filePickerBtn"> </ DIV> <DIV 클래스 = "uploadBtn"> <var에 ID = "lang_start_upload "> </ VAR> </ DIV> </ DIV> </ DIV> <DIV ID ="dndArea "클래스 ="자리 "> <DIV 클래스 ="filePickerContainer "> <DIV ID ="filePickerReady "> </ DIV > </ DIV> </ DIV> <리 ID = "filePickerBlock"클래스 = "filePickerBlock"> </ 리> </ UL> </ DIV> </ DIV> <DIV> <DIV ID = "업로드"스타일 = "표시 : 없음"> <IMG ID = "uploadBtn"> </ DIV> // ...部分省略 <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "tangram.js" > </ script> <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "wordimage.js"> </ script> <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "attachment.js"> </ script> <스크립트 유형 = "텍스트 / 자바 스크립트"> // ...部分省略
초기화; 업로드 할 파일 개수, 파일 목록이 성공적으로 업로드 : 소개, 수정을 파일 attachment.js을 업로드
창로드 = 함수 () { / * initTabs (); initButtons (); * / 을 UploadFile을 UploadFile = || 새로운 UploadFile로 ( 'queueList' ); }; // ...部分省略 uploader.on ( '모든' 함수 (입력 파일) { selectedImageCount = uploadFile.getQueueCount (), 스위치 (A 타입) { // ...部分省略 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 ( '<스팬 클래스 = "성공"> </ SPAN>' ); } 다른 { $ file.find ( '에는 .error' )는 .text (json.state) .show (); } } 캐치 (예) { $ file.find ( '에는 .error' )는 .text (lang.errorServerUpload를) .show (); } });
wordimage.js 수정 : H5 업로드 한 수를 묻는 메시지가 로직은 또한 파일 업로드하지 않았다, 업로드 H5 플래시를 사용할 때 보여주는에 따른 H5 복사
// ... 부분적으로 생략 dialog.onok = 함수 () { IF (selectedImageCount) { $ ( '. 정보', '#QueueList') HTML ( '<스팬 스타일 = "색상 : 빨강;">'. + ' 업로드되지 않은 두 개의 파일 '.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"); 사용한다} else { VAR BTN = document.getElementById를 (ID); btn.onclick = 함수 () { VAR URL2 = document.getElementById를 (dataFrom); Url2.select (); //选择对象 document.execCommand (이하 "복사"); // 복사 명령 브라우저 실행 getPasteData을 (dataFrom); } }
요약 :; 크롬 비활성화 플래시, 당신은 내장 H5 업로드를 사용하여 이미지를 덤프하지 않는 경우,보고 된 XSS 필터를 가지고는 화이트리스트 속성을 증가 할 필요가 켜져