summernote

기능: 서버에 사진을 업로드하고 MutationObserver가 서버에서 사진을 삭제하는 summernote의 기능을 다시 작성했습니다.

블로그는 여기에 있습니다: http://blog.csdn.net/ccccc_jun/article/details/79159778

1. 우선, summernote 리치 텍스트 편집기가 무엇인지 먼저 이해해야 한다고 선언하겠습니다: https://summernote.org/

개인적인 의견: 주로 백그라운드 편집을 위해 공개 계정에 글을 쓸 때와 마찬가지로 리치 텍스트 편집기를 기반으로 작성됩니다.

2. 왜 summernote를 선택하나요? 여러 가지 이유가 있습니다

(2.1) Summernote는 부트스트랩 프런트엔드 프레임워크를 지원합니다: http://www.bootcss.com/. 부트스트랩은 이제 매우 일반적으로 사용됩니다. 주요 특징은 반응형 레이아웃이며 휴대폰(모바일 장치)에 우선순위가 부여됩니다. 요즘 엄청난 휴대폰 사용자가 탐색하는 데 매우 적합합니다. 그래서 summernote는 휴대폰에서의 텍스트 편집에도 매우 적합합니다.

(2.2) bootstrap에는 bootstrap-wysiwyg라는 자체 서식 있는 텍스트 편집기도 있지만 이것을 사용하면 안 될까요? 그 이유는 Summernote가 동영상을 삽입할 수 있기 때문입니다. 하지만 다른 많은 서식 있는 텍스트 편집기에서도 비디오를 삽입할 수 있습니까? 국내 동영상 얘기인데요, 대부분의 해외 리치텍스트 편집기들은 유튜브 동영상만 삽입이 가능한데, Summernote는 텐센트 동영상, Youku 동영상도 삽입이 가능해서 텍스트 편집 시 동영상 삽입이 필요한 편집자들에게 적극 추천합니다. 여름 노트.

(2.3) Summernote는 정말 매우 간단하지만 기능은 매우 완벽합니다. 도구 모음을 사용자 정의할 수도 있으며 이모티콘도 예외는 아닙니다. 그러나 summernote에 이모티콘을 삽입하는 방법에 대한 대부분의 기사는 이모티콘을 로컬로 로드하는 데 사용됩니다. 참고: https://github.com/summernote/awesome-summernote 및 https://github.com/nilobarp/summernote-ext-emoji, 그런데 로컬에서 이모티콘을 로딩하면 사진을 삭제하는 것과 충돌이 일어나서 이모티콘 기능을 추가하지 않았습니다. 또 다른 방법은 ajax를 통해 api.github.emoji 서버에 대한 링크를 가져온 다음 링크를 통해 추가하는 것입니다. 준은 정말 그것을 어떻게 사용하는지 모릅니다.

(2.4) Summernote는 html의 본문 코드인 summernote('code')를 통해 텍스트 상자의 값을 직접 얻을 수 있으며, 데이터베이스에 직접 업로드하거나 백그라운드에 제출할 수 있습니다.

3. 왜 onImageUpload를 다시 작성해야 합니까?

(3.1) summernote에 포함된 기능은 이미지를 base64 형식으로 변환해서 저장하는 기능만 하기 때문에, 임의의 이미지를 데이터베이스에 저장하려면 수 MB의 비용이 너무 많이 들기 때문에 다시 작성했습니다. 서버에 저장한 후 서버에 있는 이미지 주소를 데이터베이스에 업로드하는 것이 훨씬 좋습니다.

(3.2) 다른 블로그에서 Summernote에 올라온 사진을 다시 작성해서 서버에 저장하는 것을 많이 봤는데, 그냥 코드만 붙여넣고 잊어버리는 게 아쉽네요. 게다가 기본적으로는 저장만 되고 삭제도 안 되더라구요. . 사진을 잘못 삽입했는데 삭제할 수 없다면 안타까울 것 같아 사진을 업로드하고 삭제할 수 있는 서머노트 버전을 작성할 예정입니다. 사실 아이디어는 내 지난 기사와 동일합니다. 몇 가지 부분에 주의하세요. jQuery의 $.ajax()는 PHP 배경과 상호 작용하고 MutationObserver를 사용하여 이미지를 삭제합니다.

(3.3) ajax 사용법을 아는 사람이라면 문제가 없을 것이므로 onImageUpload를 다시 작성하면 jQuery의 ajax()도 사용하여 배경과 상호 작용합니다. ajax()도 File 유형을 지원하므로 FormData 유형이 상호 작용에 사용됩니다.

(3.4) 다시 작성할 수 있다면 문제 없습니다. 편의상 백엔드를 PHP로 작성했지만 다른 유형의 백엔드는 코드가 10줄 정도로 비교적 간단합니다.

4. 추신: 사진을 삽입할 때 발생하는 일반적인 문제

(4.1) 상대적으로 큰 그림을 삽입하면 오류가 발생할 수 있습니다. 그 이유는 php.ini 파일에 있습니다. 첫 번째 이유는 주로 그림 크기가 허용 범위를 초과하기 때문입니다. 이 문제는 max_execution_time 또는 post_max_size 또는 upload_max_filesize를 수정하여 해결할 수 있습니다. php.ini의 문제는 해결될 수 있습니다. 더 이상 말하지 않고 다른 사람들의 경험을 참고하겠습니다: http://blog.csdn.net/anan890624/article/details/51859863

(4.2) 두 번째 이유도 php.ini 파일에 있는데 크기 제한은 아닌데 해당 파일의 임시 저장 파일을 원래 php.ini의 upload_tmp_dir에 정의해 두지 않아서 그럴 수도 있습니다. 수정해야 합니다. 이를 기반으로 수정했습니다.

(4.3) php.ini를 수정한 후에는 서버를 다시 시작해야 합니다. 그렇지 않으면 수정하더라도 오류가 발생합니다.