Tworzenie własnego edytora WYSIWYG

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa nisi, dapibus quis, vestibulum in, ultrices viverra, elit. Nulla a justo. Vivamus ullamcorper. Vivamus justo. Nunc aliquam dui non ipsum. Nulla quam. Sed cursus. Integer tincidunt. Pellentesque sit amet lacus. Suspendisse metus neque, mattis in, ultricies id, ultrices ut, felis.

Donec luctus. Cras tristique tellus eget massa. Nullam feugiat, urna id dignissim bibendum, enim est viverra magna, ut commodo tortor ipsum eu sem. Vestibulum id libero eu nulla aliquam porttitor. Integer aliquet iaculis dui. Nam dapibus feugiat purus. Phasellus laoreet erat vitae dui. Quisque dignissim ornare tellus. Nullam eget enim. Duis tempor. Etiam volutpat. Vestibulum pretium pellentesque sapien. In volutpat mi. Nunc at lacus ac neque porttitor pharetra.

javascript:document.designMode = 'on';

Najważniejszym elementem tworzenia edytora WYSIWYG jest właściwość document.designMode. Powoduje ona, że dokument wyświetlany w przeglądarce można po prostu edytować.

document.designMode = 'on';

Przetestuj to

Stosowanie iframek

Zwykle edytory WYSIWYG nie otwierają się w nowym oknie, ale są już wstawione stronę. Niestety właściwość designMode moży być używana jedynie w odniesienu do całego dokumentu. W tym przypadku z pomocą przychodzą iframki z ich właściwością contentWindow. Wystarczy utworzyć taką pływającą ramkę. <iframe id="iframka" onload = "document.getElementById('iframka').contentWindow.document.designMode = 'on';" />

Formatowanie

Niestety przeglądarki nie zawierają paska narzędzi, który umożliwiałby formatowanie tekstu. Istnieje jednak metoda execCommand(operacja, false, argument) obiektu document która pozwala operować na zaznaczeniu. Pierwszy argument to nazwa komendy która ma zostać wykonana np. "bold" czy "createlink". Drugi to zawsze fałsz. Trzeci to argument to parametr taki jak adres linku czy kolor czcionki. Większość poleceń wymaga podania null. W umieszczonej tabeli znajduję się skrócony opis komend dla tej funkcji. "Pełną wersję" można znaleźć na stronie http://www.quirksmode.org/dom/execCommand.html.

Polecenie	Argument	Opis
bold	null	Pogrubia tekst
backcolor	kolor	Zmienie podświetlenie tekstu (w firefoxie użyj hilitecolor)

Tabelka w rozbudowie

Przykład

Bold Pokaż HTML execCommand

<a onclick="document.getElementById('iframka2').contentWindow.document.execCommand('bold', false, null);" href="javascript:void(0)">Bold</a>
<a href="javascript:void(0)" onclick="alert(document.getElementById('iframka2').contentWindow.document.body.innerHTML)">Pokaż HTML</a>
<a href="javascript:void(0)" title="Użyj do testowania komend" onclick="document.getElementById('iframka2').contentWindow.document.execCommand(prompt('Nazwa komendy'), false, prompt('Argument (lub anuluj dla null)'));">execCommand</a>
<br />
<iframe id="iframka2" onload="document.getElementById('iframka2').contentWindow.document.designMode='on'; document.getElementById('iframka2').contentWindow.document.body.innerHTML='trochę tekstu'"></iframe>