JavaScript => execCommand и contenteditable

Синтаксис

bool supported = document.execCommand (commandName, showDefaultUI, valueArgument)

параметры

commandId	значение
⋮ Встроенные команды форматирования
BACKCOLOR	Значение цвета String
смелый
createLink	URL-строка
Fontname	Имя семейства шрифтов
размер шрифта	«1», «2», «3», «4», «5», «6», «7»,
ForeColor	Значение цвета String
зачеркивания
верхний индекс
разъединить
⋮ Команды форматирования блоков
удалять
formatBlock	«ht», «h», «h», «h», «p», «pre»,
forwardDelete
insertHorizontalRule
insertHTML	HTML-строка
insertImage	URL-строка
insertLineBreak
insertOrderedList
insertParagraph
InsertText	Текстовая строка
insertUnorderedList
justifyCenter
justifyFull
justifyLeft
justifyRight
Выступ
⋮ Команды буфера обмена
копия	Текущая выбранная строка
резать	Текущая выбранная строка
вставить
⋮ Различные команды
defaultParagraphSeparator
переделывать
выбрать все
styleWithCSS
расстегивать
useCSS

форматирование

Пользователи могут добавлять форматирование в contenteditable документы или элементы, используя функции своего браузера, такие как общие сочетания клавиш для форматирования ( Ctrl-B для жирного шрифта , Ctrl-I для курсива и т. Д.) Или путем перетаскивания изображений, ссылок или разметки из буфер обмена.

Кроме того, разработчики могут использовать JavaScript для применения форматирования к текущему выбору (выделенный текст).

document.execCommand('bold', false, null); // toggles bold formatting
document.execCommand('italic', false, null); // toggles italic formatting
document.execCommand('underline', false, null); // toggles underline

Прослушивание изменений contenteditable

События, которые работают с большинством элементов формы (например, change , keydown , keyup , keypress ), не работают с contenteditable .

Вместо этого вы можете прослушивать изменения contenteditable контента с помощью input события. Предполагая, что contenteditableHtmlElement является объектом JS DOM, который является contenteditable :

contenteditableHtmlElement.addEventListener("input", function() {
    console.log("contenteditable element changed");
});

Начиная

Атрибут HTML contenteditable обеспечивает простой способ превратить элемент HTML в редактируемую пользователем область

<div contenteditable>You can <b>edit</b> me!</div>

Редактирование собственного Rich-Text

Использование JavaScript и execCommand ^W3C вы можете дополнительно передать больше функций редактирования в настоящее время сосредоточены contenteditable элементов ( в частности , в позиции курсора или выбора).

execCommand функции execCommand принимает 3 аргумента

document.execCommand(commandId, showUI, value)

commandId String. из списка доступных ** commandId ** s
^{(см .: Параметры → commandId )}
showUI Boolean (не реализовано. Использовать false )
value строки Если команда ожидает команды , связанные с строковое значение, в противном случае "" . ^{(см. Параметры → значение )}

Пример использования "bold" команды и "formatBlock" (где , как ожидается , значение):

document.execCommand("bold", false, "");          // Make selected text bold
document.execCommand("formatBlock", false, "H2"); // Make selected text Block-level <h2>

Пример быстрого запуска:

<button data-edit="bold"><b>B</b></button>
<button data-edit="italic"><i>I</i></button>
<button data-edit="formatBlock:p">P</button>
<button data-edit="formatBlock:H1">H1</button>
<button data-edit="insertUnorderedList">UL</button>
<button data-edit="justifyLeft">&#8676;</button>
<button data-edit="justifyRight">&#8677;</button>
<button data-edit="removeFormat">&times;</button>

<div contenteditable><p>Edit me!</p></div>

<script>
[].forEach.call(document.querySelectorAll("[data-edit]"), function(btn) {
  btn.addEventListener("click", edit, false);
});

function edit(event) {
  event.preventDefault();
  var cmd_val = this.dataset.edit.split(":");
  document.execCommand(cmd_val[0], false, cmd_val[1]);
}
<script>

jsFiddle demo
Пример редактора Rich-Text (современные браузеры)

Последние мысли
Даже присутствуя в течение длительного времени (IE6), реализации и поведение execCommand варьируются от браузера к браузеру, что делает «создание полнофункционального и совместимого с несколькими браузерами WYSIWYG-редактора» трудной задачей для любого опытного разработчика JavaScript.
Даже если вы еще не полностью стандартизированы, вы можете ожидать довольно приличных результатов в новых браузерах, таких как Chrome, Firefox, Edge . Если вам нужна более эффективная поддержка для других браузеров и других функций, таких как редактирование HTMLTable и т. Д., Главное правило - искать уже существующий и надежный редактор Rich-Text .

Скопируйте в буфер обмена из textarea с помощью execCommand («copy»)

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <textarea id="content"></textarea>
    <input type="button" id="copyID" value="Copy" />
    <script type="text/javascript">
        var button = document.getElementById("copyID"),
            input = document.getElementById("content");

        button.addEventListener("click", function(event) {
            event.preventDefault();
            input.select();
            document.execCommand("copy");
        });
    </script>
</body>
</html>

document.execCommand("copy") копирует текущий выбор в буфер обмена

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

JavaScript
execCommand и contenteditable

Поиск…