вы не получаете то, что видите
Нет ничего особенно плохого в концепции wysiwyg, ведь она помогает клиентам сделать контент, который они вводят в систему, менее абстрактным. Они могут видеть влияние того, что они пишут в режиме реального времени, что является для них большим преимуществом. Проблема, однако, в том, что концепция и реальность часто находятся далеко друг от друга, что сводит на нет преимущества, которые wysiwyg должен им принести.
Лучший способ включить редактор wysiwyg — это встроенный редактор страниц. Придав компоненту тонкий, но узнаваемый вид, вы сможете имитировать фактический внешний вид контента. Важно убедиться, что ширина wysiwyg равна фактической области содержимого, и перенести все соответствующие стили содержимого (например, высоту строки, размер и цвет шрифта, …). Если фактическая область содержимого всего на несколько пикселей шире, чем в редакторе wysiwyg, она может уже испортить некоторый тщательно сконструированный контент. Главным образом, хотя редакторы wysiwyg используются для внутреннего редактирования. Это значительно затрудняет отображение редактора в соответствующем размере со всеми правильными стилями, примененными к контенту, не говоря уже о представлении контента в его реальном контексте.
Все это примерно то, что вы можете увидеть на экране. То, что вы получаете, на самом деле намного хуже. Редакторы wysiwyg генерируют свои собственные HTML в фоновом режиме. Теоретически это хорошо, так как генерирует заголовки, абзацы и элементы списка (семантика!), Но реальность не так хороша, как они это себе представляют. Особенно при удалении контента редакторы часто оставляют за собой пустые теги и дрянную html poo, иногда даже лишают законной силы ваш html-код. В зависимости от написанного вами CSS, это может стать проблематичным.
наручники ваших клиентов
Те, кто отвечает за продажи, любят Wysiwyg из-за его многочисленных возможностей и возможностей. Клиенты могут изменить шрифт, цвет и стиль текста. Они могут вставлять изображения, списки и заголовки, они даже могут создавать свои собственные таблицы содержимого. И, что самое приятное, всю тяжелую работу должен выполнять не ты, а клиент может сделать это сам. Многие забывают, что, работая таким образом, вы фактически превращаете клиента в веб-мастера, что часто не подходит для них.
Чем больше возможностей вы предоставите клиенту, тем больше у него будет способов облажаться. Вы можете часами говорить о фирменных стилях и руководящих принципах, но дайте им возможность поэкспериментировать со шрифтами и цветами, и прежде чем вы узнаете, что ваш тщательно созданный сайт заполнен жирным курсивом пурпурного текста тем или иным экзотическим шрифтом. И это только если вам повезет, Comic Sans, вероятно, является более реалистичным примером.
Оставлять такие параметры, как изменение цветов и шрифтов, обычно не очень хорошая идея. Большинство редакторов wysiwyg позволяют настраивать его возможности один за другим, но лишь в редких случаях редактор настраивается, чтобы оставить только необходимые инструменты. Это по-прежнему не гарантирует, что клиенты не найдут других способов запутать вещи (они достаточно изобретательны, когда это необходимо), но, по крайней мере, это закрывает некоторые очень очевидные двери.
Так что мы можем сделать
Как бы вы ни хотели предотвратить проблему, а не вылечить ее, вы не раз столкнетесь с проблемами, возникающими из-за содержимого wysiwyg. С ними ничего не поделаешь (кроме входа в бэкэнд и ручного редактирования контента), но есть несколько приемов, которые вы можете изучить.
отметить разделы содержания wysiwyg
Будь то с помощью дополнительного класса или путем добавления структурного элемента, просто убедитесь, что вы можете безопасно идентифицировать содержимое wysiwyg. Это пригодится при применении определенных исправлений CSS, а также может быть использовано для удаления остатков или нежелательных HTML-элементов с помощью JavaScript (например, шрифта или центральных тегов). Поверьте мне, стоит добавить дополнительный элемент HTML.
противодействие элементу br
br {display:block; height:1px;}
Это может быть немного опасно, в зависимости от характера вашего клиента. Элемент br часто используется для создания поддельных абзацев, при применении вышеуказанного стиля сделать это будет намного сложнее, при этом сохраняя исходную функцию br, а именно, начиная новую строку без начала нового абзаца текста. Просто убедитесь, что вы не получите 24 последовательных элемента br, чтобы создать разрыв в 24 пикселя между текстом.
Жаль, ничего подобного не существует, чтобы противостоять последовательным & nbsp; сущности, но они являются частью самого контента. Хотя, если вы должны, я думаю, что небольшой javascript мог бы добиться цели здесь.
удаление пустых элементов
p:empty (,..) {display:none; visibility:hidden;}
Еще одна небольшая хитрость заключается в использовании псевдокласса: empty для скрытия пустых элементов от просмотра. Любые теги, оставленные редактором wysiwyg, будут полностью скрыты, что гарантирует, что ни один из css на этих элементах не испортит ваш макет (в этом случае заполнение является печально известным раздражением). Это не будет работать в старых браузерах, но, по крайней мере, вы делаете что-то для других.
В качестве альтернативы вы можете использовать javascript снова, чтобы отфильтровать эти элементы как запасной вариант для менее способных браузеров. Это может привести к небольшому скачку макета (в зависимости от применяемого CSS), поэтому я все же предпочитаю вариант css в качестве стандарта.
будь креативным
И это все, что у меня есть. Если у вас есть какие-либо советы или рекомендации, пожалуйста, поделитесь. В течение долгого времени я игнорировал проблемы содержания wysiwyg, но я думаю, что пришло время избавиться от самых вопиющих проблем. Другие альтернативы (например, wyisywym — mean) просто не так удобны для пользователя или продвинуты, как нынешние редакторы wysiwyg, поэтому я уверен, что нам просто придется иметь дело с ними сейчас.
Хотя с указанными выше указателями, я уверен, вы сможете противостоять наиболее распространенным проблемам или, по крайней мере, иметь надежную базу для начала противодействия им.