Обновить
  • по релевантности
  • по времени
  • по рейтингу

Онлайновый редактор блогов Swiftpen официально открыт

Я пиарюсь
Swiftpen логотип1 марта запущена публичная версия онлайнового редактора блогов Swiftpen.

Сервис предоставляет пользователям возможность использовать единый редактор для написания постов в блоги, размещённые на различных платформах. Swiftpen поддерживает Livejournal.com и Deadjournal.com, Liveinternet.ru, Blogger, Wordpress.com и некоторые другие. Писать через него можно даже в блог, размещённый на собственном сервере: Swiftpen умеет работать с API Wordpress, MovableType и Blogger.

Читать дальше →
Всего голосов 34: ↑32 и ↓2 +30
Просмотры 908
Комментарии 83

wysiwyg своими руками

Разработка веб-сайтов *
Существует куча платных\бесплатных визуальных редакторов на любой вкус и цвет. Но что, если они работают не во всех браузерах, Вас не устраивает дизайн или функциональность, или просто душа лежит к написанию своего собственного? Ответ на вопрос, как это сделать —
Читать дальше →
Всего голосов 71: ↑61.5 и ↓9.5 +52
Просмотры 22K
Комментарии 47

Специальные HTML-символы в TinyMCE и в других WYSIWYG-редакторах

CMS *
Сегодня один клиент пожаловался, что никак не может на своем сайте, разработанном на Joomla, вставить самый обычный специальный символ Δ, который прописывается с помощью HTML-entity:
Δ

И действительно, оказалось, что этот символ не сохраняется в тексте, не зависимо от того, добавляете ли вы его с помощью кнопки «Insert Custom Character», или просто вставляете, переключившись в режим HTML. В итоге, символ просто заменяется на вопросик (кодировка сайта, при этом, UTF8).

Подозреваю, что аналогичная проблема и со многими другими специальными HTML-символами.

Для Joomla я нашел только один выход (этот совет приведен здесь: www.compassdesigns.net/joomla-blog/Editing-HTML-in-a-Joomla-Module-or-Article.html): при необходимости пользоваться такими символами, нужно создать отдельного пользователя и в качестве редактора прописать ему «No Editor». В этом случае все спец. символы сохраняются нормально. Очевидно, что это не очень «красивый» выход, все-таки нужно перелогиниваться и обладать некоторыми навыками HTML-кодирования, к тому же необходимо все время помнить, какие материалы можно редактировать в WYSIWYG-редакторе, а какие нельзя.

Может быть, кто-нибудь знает альтернативные решения? Или посоветует более надежный/удобный визуальный редактор для Joomla (и, возможно, других CMS)?

UPDATE: Проблема была в версии Joomla (у клиента стоит еще Joomla 1.5.2). По крайней мере, на последней (1.5.7) все работает правильно.
Всего голосов 6: ↑2 и ↓4 -2
Просмотры 2.4K
Комментарии 9

Файловый менеджер для FCKeditor — FCKfsys 2.0 (PHP)

Разработка веб-сайтов *
Эта статья продолжение первого варианта файлового менеджера.

FCKfsys — файловый менеджер для визуального редактора для web FCKeditor. Мне в FCKeditor все нравится, кроме файлового менеджера. Так что надо както исправлять это самому.
Подробная информация о плагине на моем сайте и там же можете посмотреть пример работы.

Выглядит файловый менеджер с превьюшками:

Вид FCKfsys 2.0

UPD: Доработки сделаны, теперь надо над интерфейсом поработать. По моему ориентир должен быть на Windows-проводник, чтобы было привычно. То есть немного причесать надо.
Читать дальше →
Всего голосов 57: ↑48 и ↓9 +39
Просмотры 2.5K
Комментарии 51

Краткий список WYSIWYG редакторов

Разработка веб-сайтов *

Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.
Читать дальше →
Всего голосов 201: ↑178 и ↓23 +155
Просмотры 327K
Комментарии 89

Сборка: markitUp, fancybox, elFinder — отличная замена WYSIWYG редакторов

Разработка веб-сайтов *
Из песочницы
Я давно занимаюсь написанием систем управления контентом для сайтов и всегда в них использовал визуальные редакторы. В виду того, что я часто не только пишу cms, но и осуществляю дальнейшую их поддержку, мне надоело, что юзеры регулярно норовят намудрить с html-кодом (о копипасте из ворда я вообще молчу). И с этого года я стал вместо визивиг-редакторов вставлять markitUp с поддержкой markdown.

И действительно, проще за 3-4 часа объяснить основы html разметки, чем отучить пользователя копипастить из ворда. Все замечательно в markitup, но не хватает возможности загружать файлы на сервер и вставлять ссылки на них.

Сегодня решил посвятить время симбиозу замечательных jquery плагинов: markitUp, fancybox, elFinder. Результатом своего труда решил поделиться.
Читать дальше →
Всего голосов 11: ↑10 и ↓1 +9
Просмотры 8K
Комментарии 23

Пишем REST приложение на Sinatra и прикручиваем Redactor. Часть 1

Ruby *
Из песочницы
Данная статья рассчитана первым делом на новичков, которые только начинают изучать Ruby. После 3 недель изучения этого замечательного языка, накопились некоторые знания, которыми хочется поделиться.

Sinatra — бесплатный и открытый программный каркас написанный на языке Ruby, предназначенный для разработки веб-приложений. (ru.wikipedia.org)

Redactor — достаточно мощный и в тоже время простой и красивый в использовании wysiwyg редактор (ссылка на хабре)
Читать дальше →
Всего голосов 19: ↑17 и ↓2 +15
Просмотры 7.2K
Комментарии 8

Пишем REST приложение на Sinatra и прикручиваем Redactor. Часть 2

Ruby *
В первой части статьи мы написали REST приложение и на 1/3 настроили Redactor.js. Сегодня мы закончим наше изобретение, написав интерфейс управления загруженными изображениями, и обеспечим загрузку файлов. При загрузке файлов мы не будем использовать CarrierWave, а пойдем обычным путем Ruby.
Читать дальше →
Всего голосов 7: ↑6 и ↓1 +5
Просмотры 2.7K
Комментарии 5

WysiBB — WYSIWYG BBCode редактор

Разработка веб-сайтов *JavaScript *jQuery *
В настоящее время все большую популярность приобретают WYSIWYG редакторы. Популярны они в силу своей простоты использования для обычных пользователей. Но по большей части, большинство этих редакторов волне хорошо справляется с созданием HTML содержимого и лишь малая часть из них умеет создавать содержимое c BBcode разметкой. А если и умеют, то настроить эти редакторы под свои нужды задача весьма и весьма тяжелая.

Так как на одном из проектов, так же использовался формат разметки BBCode, то я начал свою работу над удобным WYSIWYG редактором BBCode. В результате получился продукт под названием WysiBB.
Читать дальше →
Всего голосов 36: ↑33 и ↓3 +30
Просмотры 21K
Комментарии 57

TinyMCE 3.x: Подсчет количества слов и символов при редактировании контента

Разработка веб-сайтов *JavaScript *HTML *
Recovery mode
При использовании WYSIWYG редактора TinyMCE 3.x часто возникает потребность отображения статистики редактируемой статьи в реальном времени: отображение количества слов, символов и символов с пробелами.

Для чего это может требоваться?
Самое частое применение: создатели контента (копирайтеры, рерайтеры, контент-редакторы и т.д.) должны иметь возможность оценивать выполненный объем своей работы.

Плагин «из коробки» просто не работает для русского языка (не говоря о парсинге HTML-тегов). Поэтому было принято решение написания своего «велосипеда».
Что-нить получилось?
Всего голосов 11: ↑6 и ↓5 +1
Просмотры 5.3K
Комментарии 2

Bootstrap-wysiwyg: крошечный текстовый редактор

Разработка веб-сайтов *JavaScript *



Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб в минифицированном и сжатом виде и чуть больше 6 Кб исходного кода, базовые функции редактирования на основе execCommand, drag-and-drop для вставки изображений, поддержка стандартных горячих клавиш и ничего лишнего. Редактор работает в современных браузерах (Chrome 26, Firefox 19, Safari 6) и на мобильных платформах (IOS 6 iPad/iPhone, Android 4.1.1 Chrome). Зависимости — jQuery, jQuery HotKeys и Bootstrap.
Читать дальше →
Всего голосов 156: ↑149 и ↓7 +142
Просмотры 104K
Комментарии 63

Интеграция wysiwyg редактора с Django. Обзор

Блог компании Hot Dot Production Django *
Одно из самых частых требований заказчика — wysiwyg редактор в админке. Wysiwyg редактор имеет (как правило) интуитивно понятный интерфейс и позволяет пользователям, не знающим html, подготовить текст для размещения на сайте. Редакторы позволяют: форматировать текст, вставлять изображения и таблицы, создавать списки и много другое. Но имеют и свои минусы, самый главный из них, пожалуй, большое количество лишнего html кода.
На сегодняшний день существует большое количество различных wysiwyg редакторов и приложений для интеграции этих редакторов с django. Сегодня я расскажу про самые популярные.
Помимо собственно разметки текста, на практике важными характеристиками wysiwyg редактора для клиента являются — удобная вставка изображений и перенос отформатированного текста из сторонних источников (Word, веб-ресурсы). Важно чтобы при переносе отформатированного текста редактор удалял стили, которые могут конфликтовать со стилями сайта, например, шрифт текста. Во время обзора приложений особое внимание будет уделено этим двум характеристикам.
Читать дальше →
Всего голосов 19: ↑17 и ↓2 +15
Просмотры 35K
Комментарии 8

Пишем плагин для CKEditor 4

Разработка веб-сайтов *JavaScript *
CKEditor — это WYSIWYG редактор HTML-кода для браузеров. Всякий раз, сталкиваясь с его документацией или же с его исходным кодом, с исходным кодом его плагинов я терялся. И это не мудрено, ведь CKEditor это очень большой продукт, имеющий довольно сложную инфраструктуру. Но, зачастую, стандартных возможностей не хватает и требуется добавить свою. В этой статье я хотел бы остановиться на плагине, который позволяет встраивать и оперировать в редакторе Yandex-картами.

Вот так это будет выглядеть по окончанию редактирования:


А вот так в режиме редактирования:
Читать дальше →
Всего голосов 19: ↑19 и ↓0 +19
Просмотры 23K
Комментарии 19

Как мы запускали Хабр для гуманитариев

Блог компании uKit Group Разработка веб-сайтов *Python *JavaScript *GitHub
«В следующие два года нужно не пытаться изобразить из себя что-то особенное, а просто быть достаточно умным, чтобы компоновать то, что человечество уже создало» (с) bobuk

Год назад на внутреннем хакатоне наши ростовские ребята за ночь скрестили визуальный текстовый редактор, «Типограф Муравьева» и антиплагиат-сервис. Получилась штука, которая помогала быстро подготовить и отправить публикацию в блог.

Одно время штука жила как сайд-проект, затем нам дали немного ресурсов — ну, как внутреннему стартапу. В итоге получилось удобное коллективное медиа без редакции.


Старик Гутенберг был бы доволен

Оно позволяет людям читать занятные истории, как дядька-водолаз 40 лет поднимает затонувшие корабли в Баренцевом море, а писателям на популярные нетехнические темы — немного зарабатывать на текстах.

Давайте посмотрим, что учитывать при разработке подобного сервиса, и что выбрать, чтобы без костылей.
Истории четырех людей и нескольких капризных подсистем
Всего голосов 51: ↑44 и ↓7 +37
Просмотры 19K
Комментарии 49

Как мы делали «нарратив» – новый формат публикаций в Яндекс.Дзене

Блог компании Яндекс JavaScript *Интерфейсы *
Два года Яндекс.Дзен учился решать задачу персональных рекомендаций контента. Теперь Дзен — не только агрегатор статей и видео со сторонних ресурсов интернета, но и контент-площадка. Летом 2017 года была запущена платформа издателей, на которой каждый может создавать публикации, а при достижении 7000 досмотров — зарабатывать на этом деньги. Про систему монетизации и другие особенности платформы вы можете прочитать в журнале Дзена.

Статьи и видео — традиционные виды контента. Чтобы привлечь авторов на платформу и дать им новые инструменты увеличения аудитории, Дзен решил выйти за рамки привычных форматов. Одним из новых форматов стал нарратив. Это набор карточек, объединенных общей тематикой. Пользователи интернета все меньше читают, но все так же хотят получать интересные истории (поэтому они, например, смотрят сериалы, короткие видео и живые трансляции). Мы создали формат, который помогает авторам рассказывать последовательные короткие истории и развлекать читателей.


Нарративы издателей и авторов

Карточка может содержать текст, ссылки, картинки, видео и GIF-анимацию. Нарративом можно рассказать историю, дать пошаговую инструкцию или рецепт, опубликовать список полезных книг, описать преимущества и недостатки подходов к ведению бюджета. Это формат для авторов, которые создают интересный контент, но не пишут длинные тексты.
Читать дальше →
Всего голосов 40: ↑38 и ↓2 +36
Просмотры 18K
Комментарии 25

Как в Sports.ru писали свой WYSIWYG-редактор

Блог компании Sports.ru | Tribuna Digital Разработка веб-сайтов *
В середине 2018 года в Sports.ru задумались о переезде на новый WYSIWYG-редактор текста для пользовательских постов. С июня 2019 года редактор работает в режиме бета-версии. За это время мы решили множество проблем, связанных как с проектированием архитектуры всего сервиса, так и с реализацией самого редактора в браузере на основе библиотеки ProseMirror, и решили поделиться своим опытом.


Читать дальше →
Всего голосов 32: ↑31 и ↓1 +30
Просмотры 11K
Комментарии 41

WYSIWYG-редактор Хабра — худшее из того, что я видел

Habr Интерфейсы *

Я видел статьи, в которых авторы высказывали свое негодование по поводу WYSIWYG редактора Хабра, но я особо не придавал им значения потому, что являюсь только читателем и не пишу статей, а соответственно редактором не пользуюсь. Но вот в последние дни внезапно захотел написать, к тому же такая идея давно посещала меня. Поэтому я решил особо не заморачиваться и начал писать статью прям в редакторе на сайте. Это и была моя фатальная ошибка...

Честно признаться, я даже не мог представить себе насколько ужасный у Хабра редактор. Давно видел новости что его тестируют, внедряют и т.д. и я просто не понимаю как за такой длинные период тестирования и разработки в редакторе может быть НАСТОЛЬКО много багов. Они просто повсюду, на каждом шаге. И это не говоря о том, что редактор сам по себе неудобный

Вы сразу же можете сказать "Так просто не пользуйся им и пиши статью в удобном тебе редакторе". Это имеет смысл, но появляется вопрос ЗАЧЕМ ТОГДА WYSIWYG РЕДАКТОР НА ХАБРЕ?

Вместо пустых слов, я записал небольшие демки, на которых я воспроизвожу баги, которые нашел буквально за 15 минут использования редактора. Также для наглядности я включил показ нажатых мной клавиш. Поехали!

Читать далее
Всего голосов 453: ↑451 и ↓2 +449
Просмотры 22K
Комментарии 397