• Чистим HTML-код при вставке текста из MS Word в HTML5 WYSIWYG редактор (contenteditable)

      Здравствуйте!

      При написании своего WYSIWYG редактора возникла проблема копирования текста из Ворда. Собственно проблем три:
      • Ворд вставляет много мусорного html кода, который необходимо чистить
      • Для представления списков Ворд почему-то использует параграфы вместо тегов UL и LI
      • Собственно как определить, что вставленный текст является вставленным из Ворда.

      В общем, для решения этих проблем, был написан jquery-плагин, полный исходный код которого доступен в конце статьи. Пример использования:

      $(‘#editor’). msword_html_filter();

      Плагин вешается на событие keyup и проверяет, является ли исходный код внутри редактора вставленным из Ворда, если да, то запускается функция очистки. В результирующем html прибивается все что только можно – неразрывные пробелы, атрибуты style и align, теги span, все Mso-классы, пустые параграфы.

      Детали реализации под катом.

      UPD Демо на CodePen

      Читать дальше →
    • Получение фото с android-смартфона прямо в html форму

        Здравствуйте!

        image

        Возникла задача для интернет-магазина сфотографировать большое количество товаров. Специфика товара такова, что не столько важна красивая картинка, сколько особенности конструкции товара (с какой стороны находится шлейф, есть ли петли крепления и т.п.)

        Фотографировать обычным фотоаппаратом, потом заливать фото на компьютер, искать каждый товар в админке, потом искать соответствующее фото, показалось очень долго. Гораздо проще открыть товар в админке и навести телефон на товар. Тем более, что при хорошо выставленном освещении, современные смартфоны выдают вполне качественную картинку.

        Теория


        В андроид-маркете лежит замечательная программа IpWebCam, которая позволяет превратить свой телефон в полноценную веб-камеру. Кроме того у нее есть api для получения фотографий с автофокусом. При запуске IpWebCam, на телефоне поднимается web-сервер, который позволяет с локальной машины по wi-fi получать текущий кадр с телефона по адресу вида 192.168.0.14:8080/shot.jpg

        Идея была следующая:
        1. Вставить в форму <img> с адресом фотографии со смартфона
        2. Создать canvas и в него скопировать содержимое <img>
        3. Сохранить данные при помощи canvas.toDataURL()
        4. Отправить данные на сервер при помощи ajax

        Читать дальше →