Подтвердить что ты не робот

Какие элементы можно безопасно сделать контентными?

Недавно я работал с contenteditable на странице HTML5 и сталкивался с ошибками при использовании его с определенными элементами, и я хотел бы знать, где и как я могу на самом деле безопасно его использовать.

Я обнаружил, что создание элемента span приводит к содержанию контента в некоторых ошибках в Firefox 1 и Chrome 2. Однако создание div или раздела contenteditable полностью безопасно 3.

Руководящий принцип, о котором говорили несколько человек, состоит в том, что только элементы уровня блока должны быть сделаны контентными. Однако в Mozilla Developer Network перечислены элементы заголовка h1 до h6 как элементы уровня блока a > , а элемент заголовка contenteditable не работает в Firefox 4 и может привести к сбою страницы в Chrome 5.

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

Итак, какие элементы я могу сделать безопасным? Существует ли определенная категория? Существуют ли определенные критерии, которым должен соответствовать безопасный контент?

Примечания об ошибках:
1. Firefox 21 w/span: Элемент теряет фокус, если текстовый курсор доведен до начала или конца элемента, но если он попал туда, удалив контент. Выделение части элемента, вырезание и затем склеивание разделит элемент на два в этой точке, а затем вставьте пустой элемент между двумя частями - без фактического ввода текста, который вы пытались вставить в любом месте.
2. Chrome 27 w/span: Если диапазон охватывает несколько строк, например. будучи сломанным, вырезание и вставка содержимого часто вставляют штриховую линию после вставляемого содержимого.
3. Если вы не делаете div-дисплей: inline, в этом случае он все равно может потерять фокус, как в 1, но, видимо, только если вы доведите текстовый курсор до конца. Я не рассматриваю это "нормальное" использование элемента. 4. Firefox 21 w/heading: выбор части содержимого, тогда резка и вставка будут, подобно 1, разбивать элемент заголовка пополам в этой точке и вставлять третий элемент заголовка между двумя половинами. Он, по крайней мере, будет иметь вложенное содержимое внутри него, но теперь у вас есть три элемента заголовка, из которых первоначально был один.
5. Chrome 27 w/heading: выберите некоторый контент, вырежьте и вставьте. Сбой страницы. Вы получаете "Aw snap!" сообщение. Что это.

A jsFiddle в соответствии с запросом.

Здесь ссылка на jsFiddle для воспроизведения выше. Это довольно просто, хотя на данный момент единственное, что он не воспроизводит, это ошибка потерять фокус. Это довольно просто:

<article style="width: 100px">
    <h1 contenteditable="true">Heading</h1>
    <p>
        <strong>Some adjacent content</strong>
        <span contenteditable="true">Span! This is long enough it will spread over multiple lines.</span>
    </p>

    <div style="display: inline" contenteditable="true">An inline div also with multiple lines.</div>
</article>
4b9b3361

ОТВЕТЫ

Ответ 1

На мой взгляд, я бы сказал, что div - самая безопасная ставка по всем направлениям. Любой элемент, который вы хотите по-настоящему редактировать (будь то диапазон, заголовок и т.д.), Вы можете разместить внутри div и отредактировать, как если бы это был только этот элемент. Кроме того, чтобы учесть отображение: встроенная проблема, о которой вы говорили, вы всегда можете использовать float: left или float: прямо на вашем редактируемом div, чтобы дать ему "встроенное чувство", не имея на самом деле встроенного.

Надеюсь, что это поможет!

Ответ 2

Поскольку это эволюционирующая функция с очевидным низким приоритетом от поддержки поставщиков браузеров, она была отрывочной, а регрессии - не редкостью. Текущее положение дел меняется, так что проверить Googles, CanIUse и т.д., и убедитесь, что поддержка есть для ваших сайтов посетителей, все остальное спорно...

Поддержка в Firefox кажется твердой, по крайней мере для некоторых элементов, теперь https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content Он хорошо работает в Chrome, так же как и мое тестирование. И CanIUse выглядит хорошо: http://caniuse.com/#feat=contenteditable

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