앞서 말했듯이 부트 스트랩 웹 페이지를 계속 쓸게요 ... 그런 다음 리치 텍스트 편집기를 사용하고 그냥 검색하고 선택하겠습니다.
그런 다음 매우 당혹스러운 문제를 발견했습니다 ... 이미지 업로드 기능이 유효하지 않습니다 ... 그러면 다양한 검색이 결실이 없습니다 ... 마지막으로, 나는 공식 Summernote 문서를 튕겨서 마침내 해결했습니다. 요컨대, 나는 솔루션 프로세스를 적어 두었습니다.
백엔드 부분은 코드를 제공하지 않으며 사람들로 가득합니다. 여기에서 백엔드가 업로드 된 파일을 가져 와서 파일의 주소를 반환한다고 가정합니다.
먼저 참조 자료를 첨부하십시오 : Summernote 공식 개발 문서
SummerNote의 이미지 업로드 기능의 구현 계획에 대해 간략하게 이야기하십시오.
먼저 공식 문서에서 제공 한 API에 따르면 파일 업로드 이벤트를 첨부 한 다음 JS를 사용하여 파일을 다시 작성하고 API를 사용하여 이미지를 편집 상자에 삽입하십시오.
매우 간단한 질문 이었지만 불행히도 공무원은 인터페이스가 왜 작성되었는지 알지 못했습니다. 그리고 온라인에서 검색 한 모든 정보는 속임수를 썼습니다.
요컨대, 파일 업로드 이벤트를 인수하고 사진을 삽입하는 두 핵심 SummerNote API가 정렬되며 형식은 공식 문서에 따라 다음과 같습니다.
// 이미지 업로드 이벤트 $ ( '#SummerNote'). SummerNote ({콜백 : {onimageUpload : function (filts) {// 이미지를 서버에 업로드하고 이미지를 편집 상자에 삽입}}); // 이미지 삽입 $ ( '#summernote'). 위에 제공된 웹 사이트 API 문서그런 다음 사진 업로드를 지원하는 SummerNote 편집 상자를 쉽게 구현할 수 있습니다.
코드는 다음과 같습니다.
$ ( '#summernote'). SummerNote ({콜백 : {onimageUpload : function (filts) {// 서버에 이미지를 서버에 업로드하여 FormData 객체를 사용하여 이미지를 업로드합니다. 호환성에 대해 ... 즉, 낮은 버전에 친숙하지 않다고 말합니다. 즉, var formdata = new FormData (); formdata.append ( '0]; $. // 배경 파일 업로드 인터페이스 유형 : FormData, ProcessData : False, Success (Data) {$ ( '#SummerNote').마지막으로, 이것은 가장 간단한 이미지 업로드 기능을 구현하는데, 이는 호환성이 좋지 않고 오류 예외 프롬프트를 전혀 고려하지 않습니다 ... 필요에 따라 직접 수정하십시오.
SummerNote에서 이미지 업로드 기능을 구현하는 간단한 방법은 편집기가 공유하는 전체 컨텐츠입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.