Не снимается выделение цветом в WYSIWYG редакторе (execCommand)

@cyberguy · Регистрация: 09.10.2013

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html><head>
<script>
window.onload = function() {
    var buttons = document.getElementsByTagName("button");
    for(i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function what() {
            if (this.innerHTML == "Bold") {
                document.getElementById('editor_frame').contentWindow.document.execCommand("Bold", false, "");
            } else if (this.innerHTML == "Red") {
                document.getElementById('editor_frame').contentWindow.document.execCommand('foreColor', false, 'red');
            } else if (this.innerHTML == "removeFormat") {
                document.getElementById('editor_frame').contentWindow.document.execCommand('removeFormat', false, "");
            }
            document.all('edited_html').value = document.getElementById('editor_frame').contentWindow.document.body.innerHTML;
        }
    }
    document.getElementById('editor_frame').contentWindow.document.designMode = 'on';
    document.getElementById('editor_frame').contentWindow.document.body.innerHTML = document.getElementById('text_to_edit').innerHTML;
    document.all('edited_html').value = document.getElementById('editor_frame').contentWindow.document.body.innerHTML;
}
</script>
</head><body>
 
<div id="text_to_edit" style="display:none;"><i>Курсивный <span style="font-weight: bold;">жирный</span> <span style="color: red;">красный</span> текст</i>, обычный текст</div>
 
<button>Bold</button> <button>Red</button> <button>removeFormat</button>
 
<div id="editor_normal" style="width:50%;height:100px;">
<iframe src="/canvas.html" frameborder="0" id="editor_frame" style="width:100%; height:100px;"></iframe>    
</div>
 
<div id="editor_html" style="width:50%;height:100px;border:#000000 solid 1px;">
<textarea name="edited_html" id="edited_html" style="width:100%;height:99px;border:none;"></textarea>
</div>
</body></html>

Проблема в том, что если я снимаю выделение с красного текста (при помощи removeFormat), то так же с него снимается и "курсивность", а мне нужно, чтобы она оставалась, т.е. чтобы тег <i> не "прерывался". Например, если выделить слово "жирный" и нажать Bold, то со слова "жирный" снимется "жирность", а "курсивность" останется. Как это сделать красным текстом?

@Игор35 · 22.01.2015, 22:04

А если использовать к свойству !important?

@cyberguy · 22.01.2015, 22:27 **[ТС]**

Если Вы имеете в виду так <i style="!important">, то после removeFormat на красном цвете получится:

HTML5
1
<i style="">Курсивный <span style="font-weight: bold;">жирный</span> </i>красный<i style="!important"> текст</i>, обычный текст

Добавлено через 14 минут
В принципе, как вариант: заменить

JavaScript
1
2
3
else if (this.innerHTML == "removeFormat") {
                document.getElementById('editor_frame').contentWindow.document.execCommand('removeFormat', false, "");
            }

на

JavaScript
1
2
3
4
else if (this.innerHTML == "removeFormat") {
                document.getElementById('editor_frame').contentWindow.document.execCommand('foreColor', false, "black");
                document.getElementById('editor_frame').contentWindow.document.body.innerHTML = document.getElementById('editor_frame').contentWindow.document.body.innerHTML.replace('<span style="color: black;">','');
            }

@Игор35 · 22.01.2015, 22:45

Можно ведь заменить тег i на

HTML5
1
<span style="font-style: italic !important;"></span>

@cyberguy · 22.01.2015, 22:53 **[ТС]**

Да, но дело в том, что вместо тега <i> может быть и <p>, и <h1>, и дивы разные... В целом, решение из 3-го поста меня устраивает, хоть и имеет несколько недостатков.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@Игор35 23 / 23 / 7 Регистрация: 26.08.2013 Сообщений: 334
	22.01.2015, 22:04
	А если использовать к свойству !important? 0

@cyberguy 1 / 1 / 1 Регистрация: 09.10.2013 Сообщений: 32
	22.01.2015, 22:53 [ТС]
	Да, но дело в том, что вместо тега <i> может быть и <p>, и <h1>, и дивы разные... В целом, решение из 3-го поста меня устраивает, хоть и имеет несколько недостатков. 0