WYSIWYG-редактор для простых HTML-вставок
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 16.01.20 16:52
Оценка:
Существуют ли WYSIWYG-редакторы для самых базовых (параграф, выделение шрифта, список, простая таблица, ссылка, изображение и т.п.) вариантов HTML-кода? Чтобы можно было делать там независимые (основной текст, меню, врезки, пояснения) части страницы, собирая их вместе хоть ручной склейкой, хоть SSI/include?

Желательно, чтобы на выходе получались просто фрагменты HTML-кода, без тэгов html/body, метаинформации и прочего.

Как вообще принято делать страницы, на которых отображается несколько независимых (например, разложенных по div) частей?
html wysiwyg div meta
Re: WYSIWYG-редактор для простых HTML-вставок
От: bnk СССР http://unmanagedvisio.com/
Дата: 16.01.20 17:24
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Существуют ли WYSIWYG-редакторы для самых базовых (параграф, выделение шрифта, список, простая таблица, ссылка, изображение и т.п.) вариантов HTML-кода? Чтобы можно было делать там независимые (основной текст, меню, врезки, пояснения) части страницы, собирая их вместе хоть ручной склейкой, хоть SSI/include?


ЕМ>Желательно, чтобы на выходе получались просто фрагменты HTML-кода, без тэгов html/body, метаинформации и прочего.



https://html-notepad.com/ ?
Re[2]: WYSIWYG-редактор для простых HTML-вставок
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 16.01.20 18:51
Оценка:
Здравствуйте, bnk, Вы писали:

bnk>https://html-notepad.com/ ?


Спасибо, попробовал. Но навскидку он ничем не лучше FrontPage 2000, которым я пока пользуюсь, а местами и хуже. Он также не может работать с "голым" HTML-кодом (без html/body), а в полных HTML-документах, в отличие от FP, не понимает CSS. Ну и глючноват.
Re[3]: WYSIWYG-редактор для простых HTML-вставок
От: Marty Пират https://www.youtube.com/channel/UChp5PpQ6T4-93HbNF-8vSYg
Дата: 16.01.20 19:55
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Он также не может работать с "голым" HTML-кодом (без html/body)


А в чем проблема? Редактируй фрагменты, как полные документы, а потом собирай свой, вырезая только нужные части
Маньяк Робокряк колесит по городу
Re[4]: WYSIWYG-редактор для простых HTML-вставок
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 16.01.20 21:12
Оценка:
Здравствуйте, Marty, Вы писали:

M>А в чем проблема? Редактируй фрагменты, как полные документы, а потом собирай свой, вырезая только нужные части


Проблема в обилии лишних телодвижений. Я думал наделать фрагментов в виде голого кода, а в файлах страниц наставить SSI/include, чтобы при перезагрузке страницы в браузере она сразу собиралась в готовом виде. А с предложенным подходом придется и по два файла держать для каждого фрагмента, и после каждой правки запускать руками скрипт для преобразования. Для эпизодических правок это еще туда-сюда, но мне еще нужно придумать дизайн и раскладку, а я не настоящий сварщикдизайнер, поэтому итераций потребуются сотни.
Re: WYSIWYG-редактор для простых HTML-вставок
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 20.01.20 17:44
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Существуют ли WYSIWYG-редакторы для самых базовых (параграф, выделение шрифта, список, простая таблица, ссылка, изображение и т.п.) вариантов HTML-кода?


Если уж с WYSIWYG-редакторами все так плохо, то на что имеет смысл посмотреть из локального (под винду), где можно редактировать исходник HTML с автоформатом (например, обернул фрагмент в div/section/article — оно автоматом сделало отступы), и чтобы в параллельном окне (без специального переключения туда-сюда) оперативно отображался результат?
Re[2]: WYSIWYG-редактор для простых HTML-вставок
От: c-smile Канада http://terrainformatica.com
Дата: 21.01.20 00:53
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Если уж с WYSIWYG-редакторами все так плохо, то на что имеет смысл посмотреть из локального (под винду), где можно редактировать исходник HTML с автоформатом (например, обернул фрагмент в div/section/article — оно автоматом сделало отступы), и чтобы в параллельном окне (без специального переключения туда-сюда) оперативно отображался результат?


В обшем случае пробелы в HTML являются значимыми.

Т.е. если в C это вот:

int v;
int     v;


одно и то же и результатом будет один и тот же код, то в HTML
<section>
  v
</section>

и
<section>
      v
</section>

будут два разных DOM.

Поэтому auto indentation для HTML это вещь в себе.
Re[2]: WYSIWYG-редактор для простых HTML-вставок
От: Михaил  
Дата: 21.01.20 01:55
Оценка: 12 (1)
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Здравствуйте, Евгений Музыченко, Вы писали:


ЕМ>>Существуют ли WYSIWYG-редакторы для самых базовых (параграф, выделение шрифта, список, простая таблица, ссылка, изображение и т.п.) вариантов HTML-кода?


ЕМ>Если уж с WYSIWYG-редакторами все так плохо, то на что имеет смысл посмотреть из локального (под винду), где можно редактировать исходник HTML с автоформатом (например, обернул фрагмент в div/section/article — оно автоматом сделало отступы), и чтобы в параллельном окне (без специального переключения туда-сюда) оперативно отображался результат?


Посмотрите vscode с плагином, например,
Re[3]: WYSIWYG-редактор для простых HTML-вставок
От: Михaил  
Дата: 21.01.20 01:59
Оценка:
Здравствуйте, c-smile, Вы писали:


CS>В обшем случае пробелы в HTML являются значимыми.



CS>Поэтому auto indentation для HTML это вещь в себе.


Полагаю, это сделано для редких тегов, вроде pre. Верстальщикам же совершенно побоку, сколько пробелов между откр и закр тегами, пока верстка не сползает.
Отредактировано 21.01.2020 21:54 Михaил . Предыдущая версия .
Re[3]: WYSIWYG-редактор для простых HTML-вставок
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 21.01.20 08:05
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>В обшем случае пробелы в HTML являются значимыми.


Они имеют значение только в отдельных и редко используемых тэгах, о чем уже упомянули. Изрядное количество (если вообще не большинство) страниц успешно использует отступы.

По сути, отступы не нужны при наличии нормального WYSIWYG-редактора. Но с ними все почему-то очень странно, а работать с HTML без выравнивания очень некомфортно.
Re[3]: WYSIWYG-редактор для простых HTML-вставок
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 21.01.20 12:12
Оценка:
Здравствуйте, Михaил, Вы писали:

М>Посмотрите vscode с плагином, например,


Спасибо, смотрю. Какой-то этот VS Code убогий — удивительно, почему от него все фанатеют. Очевидно, в основном потому, что бесплатный. На маленький HTML-файл насоздавал аж семь процессов. Как номера строк отключить — навскидку не поймешь, эта зона на правый клик не реагирует. То же самое — с полосой макронавигации справа, где в уменьшенном виде отображается текст. Превьюшка отобразилась в виде полоски шириной в полсантиметра на самом правом краю, расширить ее никак не удается (там нигде не видно зоны для зацепа курсором). В общем, очередное поделие альтернативно одаренных для себе подобных. Пойду изучать описание, чтобы понять, как это чудо управляется.
Re[4]: WYSIWYG-редактор для простых HTML-вставок
От: Михaил  
Дата: 21.01.20 16:29
Оценка: +1
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Здравствуйте, Михaил, Вы писали:


М>>Посмотрите vscode с плагином, например,


ЕМ>Спасибо, смотрю. Какой-то этот VS Code убогий — удивительно, почему от него все фанатеют. Очевидно, в основном потому, что бесплатный. На маленький HTML-файл насоздавал аж семь процессов. Как номера строк отключить — навскидку не поймешь, эта зона на правый клик не реагирует. То же самое — с полосой макронавигации справа, где в уменьшенном виде отображается текст. Превьюшка отобразилась в виде полоски шириной в полсантиметра на самом правом краю, расширить ее никак не удается (там нигде не видно зоны для зацепа курсором). В общем, очередное поделие альтернативно одаренных для себе подобных. Пойду изучать описание, чтобы понять, как это чудо управляется.


Это ссылка на один из плагинов который вылез в поиске, достаточно старый. Этих html live превьюверов много:

Open the Extensions view (⇧⌘X) and search on 'live preview' or 'html preview' to see a list of available HTML preview extensions.


Мне vscode нравится тем, что очень хорошо заточен под web разработку (есть хорошие плагины для автоформата html кода, всякие автоподсказчики при работе с css/js (например, цвета), python) и, вроде как, не тормозит, в отличие от java сред типа pycharm. Могу ошибаться, но по моим представлениям, vscode это де факто стандарт сейчас для верстки, соответственно под него пишется много плагинов именно для этих задач.
Если очень хочется минимализма, попробуйте Sublime и плагины, которые на лету обновляют окно браузера с результатами вашего html кода (или можете даже самостоятельно написать — там достаточно простой Python API)
Re[4]: WYSIWYG-редактор для простых HTML-вставок
От: c-smile Канада http://terrainformatica.com
Дата: 21.01.20 17:21
Оценка: 8 (1)
Здравствуйте, Михaил, Вы писали:

М>Здравствуйте, c-smile, Вы писали:


М>Полагаю, это сделано для редких тегов, вроде pre. Верстальщикам же совершенно побоку, сколько пробелов между откр и закр тегами, пока верстка не сползает.


pre отличается от, скажем, div одним единственным правилом pre { white-space:pre; }.

Т.е. надо не забывать что к HTML может применяться CSS.

Даже и без white-space:pre; наличие пробела(ов) может по разному обрабытваться для разных display моделей.

<html>
    <head>
        <title>Test</title>
        <style>
section.a div { background: red; width:max-content; }
section.b span { background: red;  }
        </style>
    </head>
    <body>

      <section class=a>foo<div> bar </div>zop</section>
      <section class=b>foo<span> bar </span>zop</section>

    </body>
</html>


Ну и вот по теме:
https://medium.com/@patrickbrosset/when-does-white-space-matter-in-html-b90e8a7cdd33
Re[5]: WYSIWYG-редактор для простых HTML-вставок
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 21.01.20 18:39
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Т.е. надо не забывать что к HTML может применяться CSS.

CS>Даже и без white-space:pre; наличие пробела(ов) может по разному обрабытваться для разных display моделей.

А в чем, собственно, проблема? Если кто-то генерирует HTML-код инструментами, и не трогает его руками, никакого дополнительного форматирования в коде не появится. Если же приходится работать с кодом вручную, то нет смысла использовать приемы, которым форматирование мешает. И задачей правильного редактора является полная управляемость форматирования.
Re[5]: WYSIWYG-редактор для простых HTML-вставок
От: vsb Казахстан  
Дата: 21.01.20 19:03
Оценка: 4 (1)
Самое противное это код вида <span>bla</span><span>bla</span>. Тут нет пробела между тегами, поэтому всё хорошо. Добавляешь пробел и элементы расползаются на 8 пикселей (в зависимости от размера шрифта) и фиг что с этим сделаешь. Часто в меню вылазит такое. Поэтому порой приходится писать код
<div>
   ...
</div><div>
   ...
</div>
Re[6]: WYSIWYG-редактор для простых HTML-вставок
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 21.01.20 19:17
Оценка:
Здравствуйте, vsb, Вы писали:

vsb>Самое противное это код вида <span>bla</span><span>bla</span>. Тут нет пробела между тегами, поэтому всё хорошо. Добавляешь пробел и элементы расползаются


А для чего может потребоваться использовать именно span (потоковый тэг), но оформлять им элементы, которые непременно должны стоять вплотную?
Re[7]: WYSIWYG-редактор для простых HTML-вставок
От: vsb Казахстан  
Дата: 21.01.20 19:29
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

vsb>>Самое противное это код вида <span>bla</span><span>bla</span>. Тут нет пробела между тегами, поэтому всё хорошо. Добавляешь пробел и элементы расползаются


ЕМ>А для чего может потребоваться использовать именно span (потоковый тэг), но оформлять им элементы, которые непременно должны стоять вплотную?


Да без разницы, какой тег. Обычно это вообще li (т.к. меню принято оформлять через ul почему-то). Ну вот меню делаешь горизонтальное. Тебе надо, чтобы каждый прямоугольник шёл один за другим без разрывов. Самый простой способ это сделать это поставить display: inline-block и сделать так, чтобы в разметке между ними не было пробелов. С пробелами есть разные способы их убрать, но все они несут свои минусы, например можно проставить этим прямоугольникам float: left (или right), но тогда они могут порядок менять ну и вообще немного нестандартно реагировать. Можно проставить родительскому элементу font-size 0, тогда пробел будет нулевой ширины и не отобразится, но это вообще каким-то хаком мне кажется.

Возможно решается новомодными лэйаутами вроде flex или grid, но я в них не очень разбираюсь и лепить такое просто для меню, имхо, как-то оверкил.
Отредактировано 21.01.2020 19:30 vsb . Предыдущая версия .
Re[5]: WYSIWYG-редактор для простых HTML-вставок
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 21.01.20 19:51
Оценка:
Здравствуйте, Михaил, Вы писали:

М>Это ссылка на один из плагинов который вылез в поиске, достаточно старый.


Так он вроде самый популярный, судя по количеству установок. И я пока не понял, должен ли он использовать для отображения какую-то стандартную панель, которую создает сам редактор, или же плагин самостоятельно мухлюет с выделением пространства в окне и отображением панели, и нормально работает только в определенных версиях редактора (у меня 1.41.1).

М>Этих html live превьюверов много


То есть, каждый сам перебирает все, и ищет наименее глючный?

М>Мне vscode нравится тем, что очень хорошо заточен под web разработку (есть хорошие плагины для автоформата html кода, всякие автоподсказчики при работе с css/js (например, цвета)


А есть где-нибудь список наиболее популярных/стабильных плагинов для статической верстки, чтобы не ходить по граблям самостоятельно?

М>Если очень хочется минимализма, попробуйте Sublime и плагины, которые на лету обновляют окно браузера с результатами вашего html кода


Да у Sublime тоже минимализм какой-то странный — все на клавиатурных комбинациях, для фанатов...
Re[8]: WYSIWYG-редактор для простых HTML-вставок
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 21.01.20 21:07
Оценка:
Здравствуйте, vsb, Вы писали:

vsb>Тебе надо, чтобы каждый прямоугольник шёл один за другим без разрывов. Самый простой способ это сделать это поставить display: inline-block и сделать так, чтобы в разметке между ними не было пробелов. С пробелами есть разные способы их убрать


Блин. Мне пока нигде не требовалось отображать слепленные элементы, поэтому я просто был не в курсе этих тонкостей. Я потому удивился, что вчера и сегодня днем как раз игрался с выравниванием контейнеров в онлайн-редакторе w3schools.com, и у меня там элементы, выводимые в режиме inline-block, получались слепленными вплотную, без промежутков, хотя определены они были каждый в своем div на отдельной строке. И я точно помню, что никаких трюков я там не использовал, даже float, и искренне считал, что так оно и надо. А сейчас попытался воспроизвести — получается только с промежутками.

Если высота элементов, которые нужно вывести без промежутков, одинакова, то проще всего, наверное, выводить в режиме table-cell. Оно вроде как даже не требует контейнера с режимом table, но я в разных браузерах не проверял.
Re[6]: WYSIWYG-редактор для простых HTML-вставок
От: Михaил  
Дата: 21.01.20 21:53
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:


ЕМ>То есть, каждый сам перебирает все, и ищет наименее глючный?


Похоже на то. Или пишут под себя — там все на JS или typescript, веб разработчикам не привыкать).

ЕМ>А есть где-нибудь список наиболее популярных/стабильных плагинов для статической верстки, чтобы не ходить по граблям самостоятельно?


Тут не подскажу, сам недавно занялся вебом.

ЕМ>Да у Sublime тоже минимализм какой-то странный — все на клавиатурных комбинациях, для фанатов...


Из редакторов есть еще Atom, говорят, неплохой. Возможно лучше зайдет, чем sublime.
Отредактировано 21.01.2020 22:05 Михaил . Предыдущая версия .
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.