최근 프로젝트 요구 사항으로 인해 사진의 실시간 업로드 기능과 함께 프론트 엔드 텍스트 편집 상자가 필요합니다. 온라인으로 여러 플러그인을 비교했습니다. 첫째, 그것은 바이두의 ueitor였으며 프레임 워크가 너무 큽니다. 작은 프레임 워크가 너무 많은 파일을 소개했는지보고 싶었던 것은 아닙니다. 둘째, 그것은 jQuery의 easyui였습니다. 개인 버전은 무료이지만 프로젝트는 회사의 비즈니스에 속하며 프레임 워크의 상용 버전을 사용하는 것이 적절하지 않은 것 같습니다. 프로젝트의 프론트 엔드가 주로 부트 스트랩에 구축된다는 점을 고려할 때 부트 스트랩-와이 시티 위그 플러그인이 마침내 선택되었으며, 이는 매우 간단하고 가볍고 확장 가능합니다.
Bootstrap-Wysiwyg를 도입하고 텍스트 편집 기능을 구현하는 것이 매우 편리하지만 Fileapi를 사용하여 이미지 업로드가 구현되는 것을 발견했습니다. 대부분의 웹 사이트의 경우 업로드가없는 사용자 경험은 Fileapi에서 매우 좋습니다. 실제로 데이터베이스에 저장된 경우에도 이미지가 아닌 서버에 이미지의 정적 경로를 저장하기를 희망합니다. 요컨대, 우리는 Bootstrap-Wysiwyg (이하 WY라고 함)를 약간 다시 작성해야합니다.
먼저 페이지의 이미지 컨트롤을 관찰 해 드리겠습니다. 다른 컨트롤을 건너 뛰고 소스 코드를 확인하십시오. 다음 코드를 쉽게 찾을 수 있습니다.
<div> <a id = "picturebtn"> </i> </a> <input type = "file"data-lole = "magic-Overlay"data-target = "#picturebtn"data-edit = "insertimage"/</div>
설명해 봅시다. 데이터 롤 및 데이터 표적 속성은 부트 스트랩에서 사전 정의 된 이벤트입니다. 여기서 우리는 그것을 고려하지 않고 레이아웃 관련으로 이해할 수 있습니다. 핵심 요점은 여기에 있습니다. 세 번째 속성 데이터 편집, 부트 스트랩에는 그러한 이벤트가 없습니다. Bootstrap-wysiwyg.js를 관찰하면 다음과 같은 코드를 찾을 수 있습니다.
Toolbar.Find ( 'input [type = file] [data-' + 옵션.commandrole + ']') .Change (... ... CommandRole : 'edit',
다시 말해,이 속성은 실제로 선택기를 용이하게하기 위해 구현되며, 이는 이미지 버튼에 리스너 이벤트를 추가하는 것과 같습니다.
WY Image Preview의 구현을 계속 연구 해 봅시다. 첫 번째 단계는 위 코드에서 볼 수 있듯이 리스너는 FileInput의 변경 이벤트를 포착하고, 응답 및 insertFiles 함수를 호출하는 것입니다.
복원 선택 (); if (this.type === 'file'&& this.files.files.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)). done (function (dataurl) {execcommand ( 'InsertImage', Dataurl)). 옵션 .FileUploadError ( "File-Reader", E); }우리는 그것이 readfileintodataurl 메소드라고 불리는 $ .deferred () 메소드의 $ .deferred () 메소드를 사용한 다음 자체 캡슐화 된 execcommand 메소드를 통해 텍스트 상자에 이미지를 성공적으로 출력한다는 것을 알았습니다. 이 그림은 실제로 <Img> 태그이지만 SRC 속성은 문자열로 표시되는 이미지입니다. 따라서 우리가해야 할 일은 실제로 청취자가 트리거 된 후 파일을 업로드하고 사진의 SRC를 얻은 다음 후속 Execcommand 메소드로 링크를 넘겨줍니다.
저자는 연기에 익숙하지 않기 때문에 여전히 더 일반적인 콜백 모드를 사용합니다.
AjaxFileUpload의 호출 방법을 관찰하십시오.
$ .AjaxFileUpload ({url : ..., secureUrl : false, fileElementId : ..., DataType : "json", success : function (obj) {...}, error : function () {...}});필요한 속성에는 URL과 FileElementId의 두 가지 속성이 있습니다. 종속성의 정확성을 유지하려면 AjaxFileUpload를 다시 작성하는 것이 좋지 않습니다. 그러나 WY 컨트롤은 리스너에 의해 구현되므로 함수를 통해 매개 변수를 전달하는 것은 비현실적이므로 입력 상자에 대한 일부 속성을 스스로 정의하여 목표를 달성해야합니다.
FileInput에 일부 속성을 추가하십시오
<입력 유형 = "파일"id = "pictureInput"name = "picture"data-lole = "magic-Overlay"data-target = "#picturebtn"data-edit = "insertImage"action = "..." />
ID는 FileElementId로 사용되며 이름 속성도 주로 배경 값 선택에 필요합니다. 동작은 이미지를 제출 해야하는 URL입니다.
bootstrap-wysiwyg.js에서 함수를 정의합니다.
var uploadFileToServer = function (id, action, 콜백) {$ .ajaxfileUpload ({url : action, secureUrl : false, files, dataType : 'json', success : function (obj) {if (obj.status) {callback (obj.imgSrc); obj.message}, 오류 : function () {옵션.다음과 같이 insertFiles 메소드를 다시 작성하십시오.
insertFiles = function (files, id, action) {editor.focus (); $ .Each (files, function (idx, fileInfo) {if (/^Image///test(fileInfo.type)) {/ * * $ .When (readfileIntodatAurl (fileInfo)). done (dataUrl) { * execcommand ( 'insertimage', dataurl)). 옵션. "파일 리더", e);동시에, 필요한 속성을 얻기 위해 리스너에게 특정 수정을하십시오.
도구 모음 ( 'input [type = file] [data-' + 옵션 .commandrole + ']') .change (function () {restoreSelection (); if (this.type === 'file'&& this.files && this.files.files.length> 0) (this.files, $ (this)) $ (this) .attr ( 'action'))} saveselection ();주로 두 개의 매개 변수 위치가 추가되었습니다.
이런 식으로 다시 쓰기가 완료되었습니다. 올바른 실행이 수행되는지 확인 하려면 컨트롤 전에 ajaxfileupload.js를 참조하십시오.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.