Вставить изображение из буфера обмена с помощью JavaScript

Как мы вставляем изображение из буфера обмена в специальный текстовый редактор с использованием javascript? (ctrl + c и ctrl + v или моментальный снимок).

Кто-нибудь использовал текстовый редактор Ajax? Работает ли вставка изображения из буфера обмена в Ajax RTE?

Пожалуйста, поделитесь своими мыслями!

Спасибо!

Ответ 1

Поскольку этот вопрос все еще часто появляется в результатах поиска Google, я хочу отметить, что это возможно сегодня, по крайней мере, в Google Chrome. Они реализовали его для использования в GMail, но он доступен для всех веб-сайтов.

Как работает изображение пасты из функции буфера обмена в Gmail и Google Chrome 12+?

Ответ 2

Это возможно сейчас в Chrome и Firefox. Я не уверен в IE/Safari.

Посмотрите на imgur.com, onpaste и cardboard.co в качестве примеров и посмотрите код для картона на github, а также Джоэл отлично написал в своем блоге

Для записи вам нужно, чтобы пользователь нажал Ctrl + V на своем элементе, а затем вы можете захватить данные в обработчике событий вставки, прочитав с event.clipboardData, но чтобы заставить его работать вниз, вам нужно убедитесь, что фокус находится на пустом contenteditable элементе и вытащите результаты там, что плохо работает в Firefox 22. См. здесь

Ответ 3

Новые браузеры, такие как Firefox 4, поддерживают вставку данных изображений из буфера обмена в RTE как URI данных с зашифрованными данными PNG. Однако большинство веб-приложений неправильно анализируют эти URI данных и отбрасывают их. Yahoo mail правильно ручка. Однако Gmail и Hotmail отбрасывают его. Я сообщил об этом Google и Microsoft.

Ответ 4

Теперь я нашел объект clipboardData.

Но он извлекает только текстовый формат или URL из буфера обмена. clipboardData только IE, он работает с символьной строкой и возвращает null, если мы вставляем изображение.

тестовый пример

 <form>
    <input type="text" id="context"  onClick="paste();">  
  </form>

<script type="text/javascript"> 

function paste() {  

var sRetrieveData = clipboardData.getData("Text");
document.getElementById('context').value = sRetrieveData;        

}
</script>

По умолчанию доступ к буферам обмена не включен в firefox, объяснение здесь. С другой стороны, execCommand() обрабатывает только текстовые значения и не совместим с Firefox.

Как и все остальные, тот факт, что код работает в IE, является угрозой безопасности, любой сайт может получить доступ к вашему тексту буфера обмена.

Самый простой способ скопировать относительный URL-адрес изображений - использовать Java-апплет, плагин windows activeX, .NET code или перетащить его.

Ответ 5

К сожалению, невозможно вставить изображение из вашего буфера обмена в RTE.

Если вы скопируете blob из настольного приложения, такого как Microsoft Word, которое содержит изображение и какой-то текст, изображение будет отображаться как сломанная ссылка (хотя пропорции будут правильными), и текст будет вставлен правильно (форматирование будет быть потерянным).

Единственное, что возможно, это скопировать изображение в RTE и вставить обратно в RTE.

Ответ 6

Как-то:

Я не думаю, что это возможно.

Вы можете вставить имя файла, но вам действительно нужен полный путь к изображению. Вам действительно нужно загрузить изображение с пользовательской системы на сервер.

Ответ 7

Доступ к JavaScript-буферу - это риск для безопасности, и если вы (ложно) думаете, что вам это нужно, вам, вероятно, нужно вернуться к вашему дизайну...