KindeDitor는 wysiwyg 편집 효과를 지원하는 강력한 오픈 소스 온라인 HTML 편집기입니다. JavaScript로 작성되었으며 .NET, PHP, ASP, Java 등과 같은 여러 다른 지역과 완벽하게 통합 할 수 있습니다.
KindeDitor 자체는 매우 실용적인 플러그인을 제공하며 코드는 오픈 소스이므로 개발자는 필요에 따라 확장하고 수정할 수 있습니다.
Kindeditor를 사용하여 웹 사이트 컨텐츠를 편집 할 때이 시나리오를 고려하십시오. 편집자는 빈 종이에서 컨텐츠를 작성하지 않고 다른 페이지 나 Word 문서의 컨텐츠를 Kindeditor 편집기에 복사하는 경향이 있습니다. 복사 된 컨텐츠에 이미지가 포함 된 경우 먼저 소스 주소에서 해당 영역으로 이미지를 다운로드 하고이 웹 사이트가 위치한 서버에 업로드해야합니다. 그렇지 않으면 이미지가 여전히 복사 한 페이지 또는 문서를 가리키므로 이미지가 페이지에서 올바르게 열리지 않습니다. 편집자들은 종종 많은 문서를 처리해야하며, 그러한 작업은 의심 할 여지없이 매우 번거 롭습니다. Kindeditor가 붙여 넣은 콘텐츠를 자동으로 인식하고 이미지를 서버에 업로드 할 수 있습니까? 다음 코드는이 기능을 구현합니다.
페이지에서 Kindeditor를 사용하는 방법에 대한 자세한 내용은 공식 웹 사이트 문서를 볼 수 있습니다.
이 기능을 구현하는 기본 아이디어 : Editor에 편집기에 그림이 포함되어 있는지 확인하기 위해 Keyup Everity에 코드를 추가하십시오. 서버에 자동으로 업로드 해야하는 그림을 찾으려면 AJAX를 통해 사진 업로드 프로그램을 호출하여 서버에 사진을 업로드하십시오. Ajax 콜백 함수에서 해당 그림의 SRC 주소를 로컬 상대 주소로 변경하십시오.
이 기능은 서버에 Word의 이미지 복사 및 업로드를 지원하지 않습니다.
위의 그림은 최종 결과입니다. 이 프로그램은 편집자의 내용을 자동으로 인식합니다. 업로드 해야하는 사진이 있으면 편집기 상단에 프롬프트 메시지가 표시됩니다. 사용자가 "업로드"링크를 클릭하면 프로그램은 AJAX 요청을 통해 이미지 업로드 프로그램을 호출하고 해당 이미지의 SRC 주소를 콜백 함수의 로컬 상대 주소로 수정합니다.
특정 구현 단계 및 관련 코드 :
1. 친절한 편집기 수정
kindeditor.js 파일을 찾고 keyup () 이벤트에서 사용자 정의 코드를 추가하십시오. 다른 버전의 Kindeditor가 제공하는 코드는 크게 다를 수 있으며 공식 문서의 도움으로 검색해야합니다. 이 기사는 Kindeditor 버전 4.1.10을 기반으로합니다.
2. auto.js 파일 코드
함수 df () {var haspiccontainer = document.getElementById ( "has_pic"); if (has_pic "== null) {haspiccontainer = docum 서버에 업로드 </b> <a href = 'javaScript : uploadpic ();' > 업로드 </a> </div> <div id = '확인'> </div> "; $ (". ke-toolbar "). After (haspiccontainer);} var img = $ (". ke-edit-iframe "). contents (). find ("img "); var str ="; $ (Img). ( "src") .indexof ( "http : //")> = 0 || attr ( "https : //")> = 0) {piccount ++; $ (img) -1) thattr ( "src"); { "#has_pic") piclist : "get", beforesend : hide ( "#확인"); $ ( ". ke-edit-iframe"). contents (). 찾기 ( "img"); $ (img) .Each (i) {var that = $ (this); indexof ( "http : //")> = 0 || attr href = 'javaScript : closeUpload ();'> Close </a> ");} else $ ("#확인 "). text ("업로드 실패! ");}$ ( ". ke-edit-iframe"). contents (). find ( "img")는 편집기 내용에서 모든 이미지를 찾는 데 사용됩니다. 기본적으로 편집기의 내용은 iframe 요소에 저장되며 클래스 = "ke-edit-iframe"의 속성이 있습니다. 프로그램은 각 이미지 SRC 속성의 값에 "http : //"또는 "https : //"가 포함되어 있는지 여부를 결정하여 이미지가 원격 이미지인지 로컬 이미지인지 여부를 결정합니다. 이미지가 원격 이미지 인 경우 uploadpic.ashx는 jquery의 ajax 메소드에 의해 호출되어 서버에 대한 UploadPic을 호출합니다. 동시에 콜백 함수에서 해당 사진의 SRC 주소를 수정하십시오.
3. uploadpic.ashx 파일 코드
공개 클래스 업로드 피닉 : ihttphandler {public void processRequest (httpContext context) {context.response.contentType = "text/plain"; 문자열 pic = context.request.querystring [ "pic"]; 문자열 [] 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/ "); 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 (경로); 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 ( "yyyymmddhhmmss_ffff", dateTimeFormatInfo.invariantinfo) + imgurlary.substring (imgurlary.lastindexof ( ")); WebClient wc = new WebClient (); wc. downloadfile (imgurlary, dirpath + newfilename); strhtml = ymd + "/" + newfilename; } catch (예외) {// return ex.message; } return strhtml; }}원격 이미지는 WebClient 메소드를 통해 서버의 상대 경로 "/Uploads/Image/"로 다운로드되며 폴더와 해당 파일 이름은 날짜에 따라 자동으로 생성됩니다. 반환 된 결과에는 "|"로 분리 된 모든 그림의 로컬 상대 주소가 포함됩니다. 2 단계의 Auto.js 파일의 uploadpic () 함수에서 콜백 메소드 성공은 값을 얻고이를 구문 분석하고 해당 사진의 SRC 속성에 주소를 할당합니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.