나는 wysiwyg 편집기에 대한 연구를했는데 ckeditor가 좋다고 생각했지만 편집기에 이미지를 복사/붙여 넣을 수 있어야했습니다.웹 페이지에 이미지 붙여 넣기
정확하게이 웹 사이트를 찾았으므로 http://pasteboard.co/이 가능하지만 가능한 방법을 찾을 수 없습니다.
아이디어 나 해결책이 있습니까?
순수한 html5/javascript의 솔루션을 선호하고 플러그인을 피할 수 있지만 실버 라이트 또는 플래시도 허용됩니다.
당신이 이것을 처리 할 수있는 두 가지 방법, 쉬운 방법 및 어려운 방법이 있습니다.
쉬운 방법 : Clipboard API을 활용하십시오. 이것은 "HTML5"API이지만 Chrome에서만 올바르게 지원됩니다. 클립 보드에서 붙여 넣은 이미지에 Blob으로 액세스 할 수 있습니다. 그런 다음이 Blob을 XHR2 요청을 통해 서버로 보낼 수 있습니다.
하드 웨 트 : 불행히도 Chrome 이외의 모든 브라우저에서 수행해야하는 작업이며 예쁘지 않습니다. 그것은 "붙여 넣기 대상 요소"안에 숨겨진 내용 편집 가능한 DIV를 만드는 것과 관련이 있습니다. 그러면 붙여 넣은 이미지가 수신됩니다. 그런 다음 <canvas>에 이미지를 그려야하며 Blob으로 변환해야합니다. 그러나 잠깐, 더 좋아진다. 경우에 따라 도메인 간 이미지 (서버 측)를 프록시 처리해야 할 수도 있습니다 (많은 경우 가능). 이미지를 호스팅하는 서버가 자신이 호스트하는 이미지에서 CORS 요청을 허용하지 않을 경우이 작업이 필요할 수 있습니다. 이 상황에 대한 자세한 내용은 this MDN article에서 확인할 수 있습니다.
저는 자바 스크립트 기반 업 로더 인 Fine Uploader이 이미 붙여 넣기를 통해 이미지를 업로드 할 수 있지만 현재로서는이 이미지 만 Chrome에서 지원합니다. 충분한 요청을 받으면 비 클립 보드 API 브라우저에서 구현하는 번거 로움을 겪을 것이라고 생각했습니다. 솔직히 말해서, 클립 보드 API를 구현하지 않는 브라우저에서 non-CORS 지원 이미지를 처리하면 이미지 서버 측을 프록시 처리해야하기 때문에 노력이 필요하지 않을 것입니다 (물론 내 사용자 기반이 그들은 그것을 원한다).
희망이 도움이됩니다.
어려운 방법은 저에게 잘됩니다. 파이어 폭스 복사 붙여 넣기 작동하지만 데이터 URL로 붙여 넣기 이미지를 보았다.이 동작을 사용하고 콘텐츠 편집 가능한 div IE를 구현하는 방법이 있나요? IE10에서만 작동하는 경우 아무런 문제가 없습니다 –
정보 용으로 pasteboard.co의 Github 저장소와 솔루션을 구현하는 링크를 https://github.com/JoelBesada/pasteboard 사용했습니다. –
왜 투표가 중단 될까요? –
투표를하지 않았지만 먼저 뭔가를 시도하지 않고 해결책을 요구하고 있기 때문에 나는 말할 것입니다. – Daedalus
내가 항상하는 것처럼이 질문을 게시하기 전에 시도 했었지만 발견 한 것은 작동하지 않거나 크롬에서만 게시 할 가치가 있다고 생각하지 않았습니다. –