Онлайн html редактор с правильным выделением?

12
Devvver
На сайте с 02.07.2008
Offline
627
902

Собственно ищу онлайн html редактор в котором можно выделить кусок текста, нажать к примеру h2 и разметка будет справа и слева от этого выделенного фрагмента а не как захочется редактору.

Функции нужны самые простые. h1-h5, li ol ul возможность просмотра исходного кода, если есть возможность сохранения - идеально.

Мой блог. Все о создании сайтов,Seo и СДЛ (https://devvver.ru/) А вот это блог о жизни в Таиланде и Паттайе (http://tourwebring.com). Еще о Таиланде (https://tailand-gid.org).
webiumpro
На сайте с 20.03.2017
Offline
39
#1

https://neilj.github.io/Squire/

http://wysihtml.com/

http://habibhadi.com/lab/easyeditor/

http://kenshin54.github.io/popline/

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

Еще как вариант, можно использовать ace.js (редактор кода) и сделать кнопки с вставкой этих тегов прям в редакторе кода без wysiwyg. Однажды делал что-то подобное, только со стилями

Копирование лендингов. Разработка на фреймворке сервисов. Создание сайтов (/ru/forum/994418)
Devvver
На сайте с 02.07.2008
Offline
627
#2
webiumpro:
https://neilj.github.io/Squire/

Не вижу исходного кода. А так работает.

webiumpro:
http://habibhadi.com/lab/easyeditor/

Кнопка "Code" не работает.

webiumpro:
http://kenshin54.github.io/popline/

Это вообще звиздец какой то. Не смог сам разобраться, а мне это предлагать домохозяйкам :(

webiumpro:
http://wysihtml.com/

Этот ближе всего к тому что нужно! Правда есть глюк с вставкой li и ol

Aisamiery
На сайте с 12.04.2015
Offline
216
#3

Два достаточно вменяемых:

https://www.tiny.cloud/

https://ckeditor.com/

Разработка проектов на Symfony, Laravel, 1C-Bitrix, UMI.CMS, OctoberCMS
LEOnidUKG
На сайте с 25.11.2006
Online
1591
#4
Два достаточно вменяемых:

И как же в них сделать, чтобы для h2 выделялась не вся строка, а только выделенный текст?

✅ Трастовых площадок под размещение статей и ссылок. Опыт 12 лет! ( https://searchengines.guru/ru/forum/675690 ) ⭐ Купить вечные трастовые ссылки для сайта ( https://getmanylinks.ru/?srh ) ⭐ Ускорение ваших сайтов (WP, Opencart и др.) + Настройка сервера ( https://searchengines.guru/ru/forum/997205 )
webiumpro
На сайте с 20.03.2017
Offline
39
#5
Devvver:

https://neilj.github.io/Squire/
Не вижу исходного кода. А так работает.

Может быть в демке просто исходного кода нет, гляньте документацию.

А так, этот редактор самый вменяемый, я считаю. И вы вряд ли найдете нормальный с вставкой заголовков только в выделенную область, а не в весь параграф. Если там совсем нет редактора кода, проще его добавить руками (ace, codemirror, monacoeditor). Цепляете оба редактора к одному и тому же контейнеру (div, textarea), создаете кнопку для переключения редактора, ну и может быть понадобится настроить синхронизацию при переключении, повесив обработчик на клик. Работы минут на 30, а искать вы еще неизвестно сколько времени будете. К тому же, перечисленные редакторы кода гораздо удобнее, чем большинство встроенных в wysiwyg.

Aisamiery
На сайте с 12.04.2015
Offline
216
#6
LEOnidUKG:
И как же в них сделать, чтобы для h2 выделялась не вся строка, а только выделенный текст?

Такие редакторы не позволяют делать верстку не валидной (хотя под настроить можно и это). Но в теге <p> не должно быть других блочных элементов, выделять и оборачивать текст можно только в строчные элементы.

M
На сайте с 04.12.2013
Offline
196
#7

Верно, зачем позволять делать то, что по идее все равно должно отвергаться на стороне сервера.

Хостинг FOZZY ( http://fozzy.com.ru ) / Выслушаю предложения на домены ( http://u75.ru/domains-for-sale ) / Домены и скрипт для коротких ссылок ( http://u75.ru/domains-for-shortcuts )
LEOnidUKG
На сайте с 25.11.2006
Online
1591
#8
Aisamiery:
(хотя под настроить можно и это)

Это ТС и спрашивает. А не ваше мнение по поводу валидации и т.д.

Devvver
На сайте с 02.07.2008
Offline
627
#9
webiumpro:
И вы вряд ли найдете нормальный с вставкой заголовков только в выделенную область, а не в весь параграф. Если там совсем нет редактора кода, проще его добавить руками (ace, codemirror, monacoeditor)

Я не знаю php. Установить эти скрипты стремно на свой сайт - насколько я знаю через все эти скрипты легко поломать сайт.

Я интересовался готовым вариантом - мне не нужно его себе устанавливать. Мне нужен сервис для копирайтеров, так как не устраивает принимать текст в Wordе.

vandamme
На сайте с 30.11.2008
Offline
651
#10

Devvver, tinymce, ckeditor - там знать php не требуется, вся установка заключается в таких строках

<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
<textarea></textarea>
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий