JavaScript => execCommand i zadowalający

Składnia

bool obsługiwane = document.execCommand (nazwa polecenia, showDefaultUI, wartośćArgument)

Parametry

CommandId	wartość
Commands Wbudowane polecenia formatowania
backColor	Wartość koloru Ciąg
pogrubienie
createLink	Ciąg adresu URL
Nazwa czcionki	Nazwa rodziny czcionek
rozmiar czcionki	„1”, „2”, „3”, „4”, „5”, „6”, „7”
foreColor	Wartość koloru Ciąg
przekreślenie
napisany u góry
odczepić
⋮ Blokuj polecenia formatowania
usunąć
formatBlock	„adres”, „dd”, „div”, „dt”, „h1”, „h2”, „h3”, „h4”, „h5”, „h6”, „p”, „pre”
dalej Usuń
insertHorizontalRule
insertHTML	Ciąg HTML
Umieść obraz	Ciąg adresu URL
insertLineBreak
insertOrdersList
insertParagraph
insertText	Ciąg tekstowy
insertUnorderedList
justifyCenter
justifyFull
justifyLeft
justifyRight
bezczynny
Commands Polecenia ze schowka
Kopiuj	Aktualnie wybrany ciąg
skaleczenie	Aktualnie wybrany ciąg
pasta
⋮ Różne polecenia
defaultParagraphSeparator
przerobić
Zaznacz wszystko
styleWithCSS
Cofnij
useCSS

Formatowanie

Użytkownicy mogą dodawać formatowanie do dokumentów lub elementów, które można contenteditable , korzystając z funkcji przeglądarki, takich jak typowe skróty klawiaturowe do formatowania ( Ctrl-B dla pogrubienia , Ctrl-I dla kursywy itp.) Lub przeciągając i upuszczając obrazy, łącza lub znaczniki z schowek.

Ponadto programiści mogą korzystać z JavaScript, aby zastosować formatowanie do bieżącego zaznaczenia (podświetlony tekst).

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

Słuchanie zmian w contentediable

Zdarzenia, które działają z większością elementów formularza (np. change , keydown , keyup , keypress ) nie działają z contenteditable .

Zamiast tego można nasłuchiwać zmian treści, które można contenteditable za pomocą zdarzenia input . Zakładając, że contenteditableHtmlElement jest obiektem JS DOM, który jest contenteditable :

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

Pierwsze kroki

Atrybut HTML contenteditable zapewnia prosty sposób zamienić element HTML w obszarze użytkownika można edytować

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

Natywna edycja tekstu sformatowanego

Korzystanie z JavaScript i execCommand ^W3C Możesz dodatkowo przekazać więcej możliwości edytowania do aktualnie koncentruje contenteditable elementu (konkretnie w pozycji karetki lub wybór).

execCommand funkcji execCommand przyjmuje 3 argumenty

document.execCommand(commandId, showUI, value)

commandId String. z listy dostępnych ** CommandId ** s
^{(patrz: Parametry → commandId )}
showUI Boolean (nie zaimplementowany. Użyj false )
value String Jeśli komenda spodziewa wartość String związane polecenia-, inaczej "" . ^{(patrz: parametry → wartość )}

Przykład stosując "bold" polecenie i "formatBlock" (gdzie oczekuje się, że wartość):

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

Przykład szybkiego uruchomienia:

<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>

Demo jsFiddle
Przykład podstawowego edytora tekstu sformatowanego (nowoczesne przeglądarki)

Końcowe przemyślenia
Nawet od dłuższego czasu (IE6), implementacje i zachowania execCommand różnią się w zależności od przeglądarki, co sprawia, że „zbudowanie w pełni funkcjonalnego i kompatybilnego z przeglądarkami edytora WYSIWYG” jest trudnym zadaniem dla każdego doświadczonego programisty JavaScript.
Nawet jeśli nie są jeszcze w pełni znormalizowane, możesz spodziewać się całkiem przyzwoitych wyników w nowszych przeglądarkach, takich jak Chrome, Firefox, Edge . Jeśli potrzebujesz lepszego wsparcia dla innych przeglądarek i innych funkcji, takich jak edycja HTMLTable itp., Podstawową zasadą jest poszukiwanie istniejącego i niezawodnego edytora Rich-Text .

Skopiuj do schowka z obszaru tekstowego przy użyciu execCommand („kopiuj”)

Przykład:

<!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") kopiuje bieżące zaznaczenie do schowka

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

JavaScript
execCommand i zadowalający

Szukaj…