Использование contentEditable в Firefox: "полужирный" отображается правильно, но HTML-код неверен

Я пытаюсь написать редактор wysiwyg, используя div contentEditable, и у меня возникают проблемы в Firefox при работе с жирным шрифтом (и курсивом).

Когда выделен весь текст в div, execCommand('bold') работает в div, но когда я пытаюсь получить HTML-код этого содержимого, HTML-код не показывает никакого форматирования.

Чтобы понять, что я имею в виду, попробуйте запустить следующий HTML-код в Firefox 5:

<script type="text/javascript">
window.onload = function () {

    var output = document.getElementById('output');
    var input = document.getElementById('input');

}
</script>
<body>
<button onClick="execCommand('bold', false, null);output.value=input.innerHTML;">Bold</button>
<div style="width: 300px; border: 1px solid #000000;">
<div id="input" contenteditable="true">Some editable text</div>
</div>
<textarea id="output"></textarea>
</body>
</html>

Пожалуйста, попробуйте следующее:

  • Выберите слово "Некоторые" только. Нажмите кнопку Bold. Это сделает текст жирным, как и ожидалось. HTML-вывод использует <span style="font-weight:bold;"> выделять слово, что несколько неудачно (это <b> в Safari, Chrome), но тем не менее делает свою работу.
  • Выделите всю фразу "Некоторый редактируемый текст" (вручную или с помощью CTRL-A). Нажмите кнопку Bold. Хотя текст contentEditable выделен жирным шрифтом, как и ожидалось, для вывода HTML не применяется форматирование жирным шрифтом.

Будем очень благодарны за любые идеи о том, что может быть причиной этих проблем и как их обойти!

Источник

2 ответа

Решение

Вот jsFiddle для вашего исходного кода: http://jsfiddle.net/Bv2Ek/

Проблема в том, что Firefox добавляет font-weight: bold к style атрибут редактируемого <div> элемент, чтобы сделать все это жирным шрифтом, что вполне разумно. Если бы вы предпочли это использовать <b> или же <strong> элементы, чтобы применить смелость, вы можете использовать StyleWithCSS Команда первая. Добавьте следующее в ваш скрипт:

function bold() {
    document.execCommand('StyleWithCSS', false, false);
    document.execCommand('bold', false, null);
}

И ваша кнопка становится:

<button onClick="bold(); output.value=input.innerHTML;">Bold</button>

Пример jsFiddle с измененным кодом: http://jsfiddle.net/Bv2Ek/1/

Источник

Если... это ЕСЛИ использует jQuery.

После выполнения команды:

$('b').contents().unwrap().wrap('<strong/>');
Источник
Другие вопросы по тегам