Валерий Викторович Янцев - JavaScript. Визуальные редакторы : учебное пособие для СПО

обратим внимание на самую первую команду Copy. С ее
помощью в выделенном фрагменте копируется текст и различные элементы. Но
тот же самый результат можно получить, выделив фрагмент, щелкнув на нем
правой кнопкой мыши и выбрав из контекстного меню пункт «Копировать».
А это значит, что совершенно безболезненно можно отказаться от команды
Copy и сохранить возможность копировать «чистый» текст без HTML154

элементов (как в других редакторах). В этом случае в массивах mid и mco
нужно удалить элементы с индексом 0, а кнопке
назначить точно такой же
обработчик, как, например, во втором редакторе.
13.3. Изменение цвета букв или фона текста
Регистрация обработчика нажатия кнопок цветового оформления такая
же, как в редакторах 1 и 3.
Запуская функцию clr, в обязательном порядке проверяем выделение.
В остальном данная функция мало напоминает то, что мы видели раньше.
Здесь мы используем команду insertHTML метода execCommand. Таким
способом можно вставить блок HTML-кода, отдельный элемент или простой
текст. Для выполнения данной команды методу требуется передать три
аргумента: имя команды; значение, указывающее, отображать или нет
пользовательский интерфейс; HTML-код или текст. Второй аргумент обычно
указывают false. Это означает, что третий аргумент передается в метод
непосредственно из программы.
На первом этапе определимся с третьим аргументом. Он представляет
собой выделенный текст, обрамленный открывающим и закрывающим тегами
span. Стилевое оформление «внутренностей» тега мы получаем из панели
выбора цвета:
document.getElementById("ccc").value

Полный код, формирующий третий аргумент:
let cl=''
+sel+'';

Напоминание. Если аргумент b, переданный в функцию clr, пустой, то
цветом выделяется текст. Если значение этого аргумента background-, то
меняется цвет фона текста. sel — объект, содержащий выделенный текст.
На втором шаге создаем цветовое оформление:
document.execCommand("insertHTML", false, cl);

Завершается процесс вызовом функций tran и inter.
13.4. Вставка линии
До 17 строки функция вставки линии похожа на то, что мы видели,
например, в первом редакторе. Но дальше начинаются отличия. В файле
editor4.js при создании какого-либо элемента используется команда
insertHTML. Поэтому сейчас наша задача — сформировать не просто набор
155

свойств элемента, а его полный код. Делаем это в два приема. Сначала
формируем стили
let shr=' style="'+hr1+hr2+'background: '+hr3_v+
'; border: 0;"';

а потом компонуем линию:
let hrres='';

Теперь можно отправлять данные функции place:
place(hrres, "hr_d");

В новой версии она принимает только два аргумента: HTML-код создаваемого
элемента и id закрываемой вкладки:
function place(x, y)
{
...
}

«Начинка» функции place состоит из четырех инструкций. Первая создает
в окне редактора новый элемент:
document.execCommand("insertHTML", false, x);

Назначение остальных вам уже известно:
tran();
inter();
clo(y);

13.5. Вставка фрейма
Функция отличается от аналогичных тремя последними строками:
– составляем набор свойств фрейма
let sifr=' style="'+ifr2+ifr3+ifr4+ifr5+ifr7+'"';

– «собираем» его HTML-код
let ifres='
';

– поручаем функции place создание фрейма
place(ifres, "ifr_d");

156

13.6. Вставка рисунка
Такая же картина вырисовывается при создании изображения:
– составляем набор свойств картинки
let sima='style="'+ima4+ima5+'width: '+ima6+
'; border: '+ima7+' solid '
+ima8_v+'; cursor: pointer;"';

– пишем ее HTML-код
let imares='';

– вызываем функцию place для вставки рисунка
place(imares, "img_d");

13.7. Вставка таблицы
После выяснения, какие настройки введены для создания таблицы,
начинаем создавать первую часть ее HTML-кода:
let tb='';

Затем наполняем таблицу ячейками:
let sum="";
for(let i=0; i --">