26
2013
WordPress – TinyMCE, link anchor/kotwica i pobieranie zaznaczonego tekstu
Po małej walce z TinyMCE udało mi się wyciągnąć fragment zaznaczonego tekstu z
textarea
(pole treści artykułu). Niby zadanie łatwe, ale… W momencie tworzenia kotwicy/anchor, gdy chcemy wyciągnąć zaznaczony tekst z edytora WYSIWYG, jest problem z odwołaniem się do okna z polem tekstowym, w którym piszemy artykuł.
Opis problemu
Poniżej opiszę ewentualne wykorzystanie modyfikacji TinyMCE.
- Użytkownik pisze artykuł.
- Zaznacza tekst, aby utworzyć kotwicę (anchor) na wybranym słowie lub zdaniu.
- Skrypt TinyMCE w chwili dodania kotwicy ma pobrać zaznaczony fragment tekstu wraz z nazwą kotwicy, którą wpisze użytkownik.
- Skrypt TinyMCE dodaje kotwicę i kopiuje jej nazwę wraz z zaznaczeniem do innego pola na stronie edycji artykułu.
Problemem jest odwołanie się do elementów DOM strony z edycją artykułu. Okno pytające o wprowadzenie nazwy kotwicy jest dzieckiem okna edytora. Dlatego też odwoływać się do niego będziemy przez instrukcję window.parent
.
Rozwiązanie
Otwieramy do edycji plik wtyczki TinyMCE:
..\wp-includes\js\tinymce\themes\advanced\js\anchor.js
W funkcji update()
ok. linii 20, po fragmencie…
1 2 |
update : function() { var ed = this.editor, elm, name = document.forms[0].anchorName.value, attribName; |
…dodajemy dwie zmienne:
1 2 3 4 5 6 |
// pobranie zaznaczonego fragmentu tekstu bezpośrednio z edytora // jak widać z okna edycji kotwicy odwołujemy się do okna rodzica var selection = window.parent.tinyMCE.activeEditor.selection.getContent(); // przykład odwołania się do wybranego przez nas pola w oknie edycji artykułu, do którego wstawimy skopiowany tekst wraz z nazwą kotwicy var excerpt = window.parent.document.getElementById('excerpt'); |
Następnie tuż przed fragmentem kodu:
1 2 3 |
tinyMCEPopup.close(); } }; |
Dodajemy fragment odpowiedzialny za wykorzystanie wcześniej dodanych zmiennych:
1 |
excerpt.innerHTML = excerpt.innerHTML + 'Zaznaczenie: ' + selection.replace(/^\s+|\s+$/g, '') + ' || Anchor: ' + name; |
Dodatkowe informacje
Dorzucam kilka przydatnych odnośników do dokumentacji TinyMCE:
- Manipulacja drzewem DOM – http://www.tinymce.com/wiki.php/API3:class.tinymce.dom.DOMUtils
- Klasa Selection, do kontroli zaznaczonego tekstu – http://www.tinymce.com/wiki.php/API3:class.tinymce.dom.Selection
Podobne tematy
Dodaj komentarz
O mnie
Najnowsze wpisy
- Drzewo kategorii – budowa struktury od dołu do góry
- PHPExcel – export + import pliku XLS
- WordPress + Polylang – Tworzenie klasy CSS z ID strony/wpisu w wybranym języku
- Mailing – Poprawna konstrukcja szablonu maila HTML/CSS i prawidłowy wygląd w programie pocztowym
- Szukasz programisty PHP dla e-commerce?