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
WordPress + Polylang – Tworzenie klasy CSS z ID strony/wpisu w wybranym języku- WordPress – Zmiana pozycji podpisów zdjęć (captions)
- WordPress – Zmiana funkcji wyszukującej posty (posts_search)
- WordPress – Plugin Crayon Syntax Highlighter oraz .htaccess problem
Autor wpisu: Arkadiusz Krakiewicz
Programista i właściciel sklepu jednocześnie, dzięki temu rozumie potrzeby osób prowadzących sprzedaż w internecie. Od 2006 związany z eCommerce. Zaczynał jako freelancer tworząc sklepy oraz strony www. Aktualnie zajmuje się: programowanie w PHP, Symfony 2, Android, PrestaShop, osCommerce, OpenCart, WordPress.
Dodaj komentarz
O mnie
Arkadiusz Krakiewicz
Programista aplikacji webowych dla branży eCommerce. Jednocześnie jako właściciel sklepu zna od "podszewki" potrzeby osób prowadzących sprzedaż w internecie.
W swoich rozwiązaniach stawia na funkcjonalność i wydajność aplikacji pod kątem obsługi klienta.
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?