Вопросы Теги

Стилизация списков contentEditable (
  • ) с помощью семейства шрифтов, размера шрифта и цвета

    • Я ищу способ стилизовать списки, чтобы они использовали форматирование, заданное пользователем при редактировании в элементе contentEditable. В частности, я хочу иметь возможность стилизовать число/маркер так же, как и остальную часть содержимого

  • .

    Судя по проведенному мной тестированию, браузер никогда не стилизует теги

  • напрямую (что фактически управляет стилем числа/маркера), а всегда размещает (или , если StyleWithCSS) в качестве первого дочернего узла, используя его для форматирования. Я уже испробовал несколько идей, чтобы обойти это, но не нашел успеха:

    1. Применить стили к
  • программно

    • Здесь я попытался прослушать 'DOMNodeInserted' и когда тег

  • был вставлен в DOM, я запросил текущие команды fontName, fontSizeи foreColorи применил их как встроенный стиль в
  • .

    textarea.addEventListener('DOMNodeInserted', function (evt) {
    if (evt.target.nodeName === 'LI') {
        evt.target.style.color = queryCommandValue('foreColor');
        evt.target.style.fontFamily = queryCommandValue('fontName');
        evt.target.style.fontSize = queryCommandValue('fontSize');
    }
}, false);

    Даже при этом, как только вы начинаете вводить элемент списка, браузер пытается быть «умным» и удаляет стили из

  • , помещая их в Тег (или ). :(

    2. Создайте правило для стилей, которые будут вставлены в таблицу стилей

    Основываясь на попытке выше, вместо того, чтобы писать стили в строке, я создал для них правило, дал

    • закрепил идентификатор и вставил правило в таблицу стилей. Теперь правило будет управлять стилем
  • , и я мог использовать CSSOM для постоянного обновления любого конкретного
  • sstyles

    Казалось, что это работает очень хорошо (с несколькими ошибками, которые нужно исправить), однако это полностью ломает стек отмен contentEditable.Поскольку команда отмены привязана только к textContentи другим командам форматирования, невозможно «отменить» стили, которые вы устанавливаете в таблице стилей. (По крайней мере, не очень интуитивно, я думал о том, как это можно сделать...)

    3. Следите за изменениями атрибутов
  • и сохраняйте их

    • Для В этой попытке я использовал недавно доступный MutationObserver http://www.w3.org/TR/dom/#mutationobserver, доступный на уровне DOM 4. Этот наблюдатель может отслеживать изменения в атрибутах узла. , который будет передан обратно в MutationRecord. Он может даже содержать предыдущие значения атрибутов, включая значения style, чтобы я мог узнать, что было удалено, и повторно применить его.

    var observer = new WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.target.nodeName === 'LI') {
            ...
        }
    })
});

observer.observe(document, {
    attributes: true,
    subtree: true,
    attributeOldValue: true
});

    Это по-прежнему страдает от отсутствия поддержки отмены. Вы отмените другие изменения форматирования, но

  • сохранят свои стили.

    Есть какие-нибудь новые идеи? Также приветствуются решения только для современных браузеров. Я знаю, что могу отформатировать свой собственный HTML для использования в списках, но я пытаюсь понять, можно ли это сделать с помощью стандартных команд insertOrderedListи insertUnorderedList, которые используют реальный список теги.

    ** Обновление от 7 ноября 2012 г. **

    Похоже, никто еще не решил эту проблему, вот пример JSFiddle, чтобы увидеть, что я описываю: http://jsfiddle.net/8LyZR /. Просто попробуйте изменить стили маркированных или нумерованных списков.

    Для проекта, над которым я работаю, мы используем нашу собственную сборку WebKit, поэтому мы смогли исправить это с помощью собственного изменения, но я надеюсь, что есть способ (или будет способ) сделать это напрямую. с HTML/CSS/JS.

    • 8
    задан skyline3000 7 November 2012 в 17:10
    поделиться