Wysiwyg с копией / вставкой изображения
Во-первых, я понимаю, что изображение не может быть "скопировано" с локальной машины на сайт. Я понимаю, что это должно быть загружено. Я веб-программист, и я знаком с общими инструментами веб-wysiwyg, такими как TinyMCE и FCKEditor. Мой вопрос заключается в том, существует ли программа или веб-модуль или что-то в этом роде, которое выполнит автоматическую загрузку изображений для wysiwyg. У меня есть клиент, который постоянно жалуется на невозможность скопировать / вставить документы с изображениями из MS Word в wysiwyg для создания контента на своем веб-сайте.
Я посмотрел на TX Text Control ( http://labs.textcontrol.com/) и искал, возможно, флэш-файл wysiwyg, который мог автоматически загрузить файл за кулисы. Я не знаю, существует ли это, и Google не сильно помог мне в моем поиске, поэтому я решил спросить других кодировщиков.
Я открыт для любых серверных технологий или требований к браузеру. Я ищу какой-то инструмент на основе браузера, а не инструмент приложения, такой как Dreamweaver или другой.
Если хорошего решения проблемы не существует, я готов принять это на данном этапе.
Примечание: это был запрос от клиента, и мне он показался довольно необоснованным. Я решил собрать рекомендации сообщества, а не просто сказать клиенту "Нет", и варианты здесь были чрезвычайно полезны и информативны в представлении возможных решений.
11 ответов
Вы можете найти вдохновение от ScreenshotMe.
В основном вам нужны разные части:
- что-то, что вынимает изображение из буфера обмена и загружает его в Интернет: это может быть Java-апплет, расширение Flash или Firefox. Преимущество Flash или Java заключается в кросс-браузерности
- тогда вы используете
<canvas>тег для отображения изображения после его загрузки (используйте explorercanvas дляcanvasв Internet Explorer)
Как я отметил в своем комментарии, Google прекращает работу в пользу HTML5, взгляните на 7 Взаимодействие с пользователем - HTML 5.
РЕДАКТИРОВАТЬ:
HTML5 при реализации должен взаимодействовать с буфером обмена системы. Я думаю, что следующий сценарий будет работать:
- вставить данные изображения из буфера обмена на холст
- вернуть данные пикселя холста как изображение, используя
toDataURL(): см. Canvas2Image - загрузить изображение на сервер при отправке: см. Сохранение изображения холста с помощью PHP
Пока HTML5 copy/paste drag&drop не будет реализован, вам придется полагаться на Flash или (подписанный) Java-апплет для взаимодействия с буфером обмена.
Я вижу, что это старая ветка, но в случае, если кто-то все еще ищет что-то подобное (как и я), я наткнулся на продукт под названием https://textbox.io/ сегодня вечером от компании под названием Ephox (похоже, что они также купили TinyMCE),
В любом случае, это первый, если не единственный, редактор javascript/HTML5, который я обнаружил, который успешно вставляет изображения из слова, используя собственный плагин, который они называют PowerPaste. После первоначальной вставки, он предлагает снова вставить вставку, чтобы импортировать изображения. Работал как шарм - единственная проблема, с которой я столкнулся, заключалась в том, что это адски дорого для стартапа, подобного тому, в котором я участвую, по цене $500 в месяц (± 6650+ в месяц в ZAR), что, к сожалению, обходится без наших опций:(
В asp.net нет прямой опции, но вы можете сделать это
http://www.codeproject.com/KB/graphics/ClipboardActiveX.aspx
У меня есть клиент, который постоянно жалуется на невозможность скопировать / вставить документы с изображениями из MS Word в wysiwyg для создания контента на своем веб-сайте.
И это не удастся. MS Word не создает корректный HTML, страницы будут выглядеть неработающими для пользователей соответствующих браузеров. В Word также есть несколько странных методов привязки изображений и текста, которые не будут переводиться. Короче говоря, Word - плохая среда для разработки HTML.
Конечно, ваши клиенты, вероятно, не примут то, что приводит нас к варианту 2:
Поскольку ваш клиент выбрал Word в качестве редактора WYSIWYG, очень мало смысла вставлять этот контент в другой редактор WYSIWYG. Ваше оптимальное решение - изучить способы автоматизации экспорта HTML из Word или OPen Office. Это можно сделать с помощью комбинации VBA и серверного сценария, чтобы сначала преобразовать документ в HTML (это также запишет изображения на диск), а затем загрузить объединенный контент на сервер.
Если я правильно понимаю ваш вопрос, ваш клиент может иметь любой случайный документ Word, и что некоторые из этих документов могут содержать изображения.
То, что вы описываете, похоже на управление контентом в некоторых отношениях и создание статических веб-страниц в других.
Я предполагаю, что ваш клиент хочет, чтобы посетители их веб-сайта просматривали такие документы как страницы HTML, а не как типы Word MIME.
Некоторые варианты:
используйте Word, чтобы сохранить как HTML. Не самый чистый HTML, но, вероятно, самое чистое решение.
Пусть ваш клиент купит продукт, такой как Dreamweaver, который будет импортировать документ Word и очищать сгенерированный HTML-файл Word.
если у вашего клиента много денег, разработайте индивидуальное решение с помощью VSTO
У меня вопрос, если существует программа или веб-модуль или что-то в этом роде, которые будут выполнять автоматическую загрузку изображений для wysiwyg
XStandard Pro будет загружать изображения на сервер, вставленные из Word или других приложений / файловой системы.
Только HTML
Вы можете использовать что-то, что (при перетаскивании) автоматически создает невидимую HTML-форму, ввод файла, копирует путь к имени файла в fileinput и отправляет форму.
Вы можете создать форму внутри невидимого фрейма, чтобы отправить ее в фоновом режиме без изменения текущей страницы. Вы знаете, стандартная процедура Ajax.
Небольшая помощь для падения / вставки
Я не знаю, позволяет ли HTML удалять файлы. Если этого не произойдет, вы можете взглянуть на спецификацию HTML 5, которую Google пытается продвинуть вперед.
Другим вариантом является использование какого-либо компонента расширенного клиента (Java-апплет с Swing или Flash, или Silverlight, или wathever), по крайней мере, для определения удаления файла (или вставки) и создания формы HTML.
Почему я предпочитаю отправлять форму
Я предпочитаю создание формы над апплетом, отправляющим файл, потому что он не требует другого специального порта на сервере или чего-то в этом роде.
Я понимаю затруднительное положение вашего клиента. Я работаю над тем же, но с небольшим приоритетом на данный момент, поэтому я не могу представить какие-либо решения, только несколько заметок.
Когда я копирую + вставляю изображение из сохраненного документа OpenOffice (не работает с несохраненным) в экземпляр CKEDitor - у меня нет MS Word здесь для тестирования, но я предполагаю, что он работает аналогично - я вставляю следующий HTML-код в редактор:
<img src="file:///C:/Users/PEKKAG%7E1/AppData/Local/Temp/moz-screenshot-4.png">может быть возможно настроить загрузчик Flash или Java таким образом, чтобы этот файл можно было получить с минимальным вмешательством пользователя. Возможность извлекать файлы с компьютера пользователя - это ужасная дыра в безопасности, но может быть возможно, по крайней мере, предварительно установить загрузчик в каталог временных каталогов.
Тем не менее, метод Canvas, который упоминает Грегори Пакош, мне кажется наиболее интересным, потому что таким образом можно было бы хранить изображения на стороне сервера без вывода сообщений. Тем не менее, применяются те же ограничения безопасности, что и в приведенном выше примере: Изображение находится в другом домене и, следовательно, не может быть прочитано сценарием на странице. Можно было бы обойти это, используя настройки браузера или написав собственное расширение.
В поисках аналогичного решения я заметил, что GMail позволяет это делать, если вы копируете и вставляете из браузера.
Если вы копируете из Word, он, кажется, знает размеры изображения (вы можете увидеть контур изображения), но фактически не вставляет / загружает изображение.
Из приложений для настольных компьютеров, не входящих в Office, похоже, нет поддержки.
Поэтому, исходя из предположения, что инженеры Google посвятили этому серьезное время, я подозреваю, что это пока невозможно из настольных приложений, но, возможно, если вы найдете быстрый способ сохранить контент в Интернете (например, с помощью блога Word или Сохранить как функции HTML), вы можете скопировать и вставить их, если ваш клиент готов сделать этот дополнительный шаг, и вы можете позволить им сохранять данные непосредственно на веб-сервере.
Ник
Редактор WYSIWYG под названием Redactor позволяет копировать изображения непосредственно в редактор, а не нажимать кнопку загрузки изображения.