tinyMCE jako domyślny edytor Joomla idealnie sprawdza się jako podstawowe narzędzie WYSIWYG do edycji różnych treści zarówno z poziomu zaplecza jak i front-end’u. W najpopularniejszym przypadku tinyMCE przypięty jest do pola tekstowego odpowiadającego treści artykułu, kontaktu itp. Istnieją jednak przypadki kiedy dany widok (szczególnie w rozbudowanych komponentach) potrzebuje wyświetlić kilka a nawet kilkanaście instancji tinyMCE. Nie ma większego sensu w używaniu wielu pól typu editor bo na ogół użytkownik edytuje tylko jedno pole w danej chwili i dopóki nie wybierze kolnego pola do edycji wizualny edytor jest mu tam zupełnie potrzebny. Dodatkowo, okno tinyMCE jest zdecydowanie większe a przede wszystkim wyższe niż zwykłe textarea co wynika z dołączanych buttonów oraz menu, tak więc bez X instancji tinyMCE widok będzie zdecydowanie schludniejszy.

Wczytywanie edytora jedynie dla aktywnego pola ma jeszcze jedną niewątpliwą zaletę – proces wczytywania widoku zawierającego jedno okno tinyMCE jest szybszy niż inicjalizowanie edytora dla każdego pola przy każdym odświeżeniu widoku.

Jak wczytać edytor dynamicznie?

Rozwiązaniem najprostszym i zaraz najskuteczniejszym jest skorzystanie z jQuery i funkcji click() dla pól typu input lub textarea. Aby nie produkować za dużo kodu najlepiej jest dołożyć odpowiednią klasę dla elementów, które chcemy aby wczytywały edytor i posłużyć się kodem w stylu:

jQuery('.dynamic-editor').click(function(e) {
 var target = jQuery(e.target);
 // uruchomienie edytora
 …
});

Aby uruchomić edytor niezbędne nam będzie wskazanie dla którego elementu ma on być przypięty stąd też pobranie obiektu w który kliknął użytkownik (target). Dobrym pomysłem jest też sprawdzenie czy biblioteka edytora jest wczytana dzięki prostemu warunkowi:

if(typeof tinymce !== 'undefined') {
 // wczytaj edytor
}

Następnie edytor uruchamiamy za pomocą kodu:

tinyMCE.init({selector: '#'+target.attr('id')}

Powyższy przykład przedstawia ‘przypięcie’ edytora do elementu , który został wybrany na podstawie ID ale nic nie stoi na przeszkodzie aby skorzystać z klasy lub typu w tym miejscu. Przedstawiony kod to oczywiście opcja minimum bo nie określa żadnych dodatkowych elementów konfiguracji tinyMCE. W zależności od ustawień wtyczki tinyMCE parametry podane do funkcji init() mogą się różnić a dla typu rozbudowanego wyglądają następująco:

tinyMCE.init({
			// General
			directionality: "ltr",
			language : "en",
			mode : "specific_textareas",
			autosave_restore_when_empty: false,
			skin : "lightgray",
			theme : "modern",
			schema: "html5",
			selector: '#'+field.attr('id'),
			// Cleanup/Output
			inline_styles : true,
			gecko_spellcheck : true,
			entity_encoding : "raw",
			valid_elements : "",
			extended_valid_elements : "hr[id|title|alt|class|width|size|noshade]",
			force_br_newlines : false, force_p_newlines : true, forced_root_block : 'p',
			toolbar_items_size: "small",
			invalid_elements : "script,applet,iframe",
			// Plugins
			plugins : "autolink,lists,image,charmap,print,preview,anchor,pagebreak,code,save,textcolor,colorpicker,importcss,searchreplace,insertdatetime,link,fullscreen,table,emoticons,media,hr,directionality,paste,visualchars,visualblocks,nonbreaking,template,print,wordcount,advlist,autosave,contextmenu",
			// Toolbar
			toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect | formatselect fontselect fontsizeselect",
			toolbar2: "searchreplace | bullist numlist | outdent indent | undo redo | link unlink anchor image | code | forecolor,backcolor | fullscreen",
			toolbar3: "table | subscript superscript | charmap emoticons media hr ltr rtl",
			toolbar4: "inserttime cut copy paste | visualchars visualblocks nonbreaking blockquote template | print preview",
			removed_menuitems: "newdocument",
			// URL
			relative_urls : true,
			remove_script_host : false,
			document_base_url : "http://localhost:8888/j3/",
			rel_list : [
				{title: 'Alternate', value: 'alternate'},
				{title: 'Author', value: 'author'},
				{title: 'Bookmark', value: 'bookmark'},
				{title: 'Help', value: 'help'},
				{title: 'License', value: 'license'},
				{title: 'Lightbox', value: 'lightbox'},
				{title: 'Next', value: 'next'},
				{title: 'No Follow', value: 'nofollow'},
				{title: 'No Referrer', value: 'noreferrer'},
				{title: 'Prefetch', value: 'prefetch'},
				{title: 'Prev', value: 'prev'},
				{title: 'Search', value: 'search'},
				{title: 'Tag', value: 'tag'}
			],
			//Templates
			templates: [
			{title: 'Layout', description: 'HTMLLayout', url:'http://localhost:8888/j3/media/editors/tinymce/templates/layout1.html'},
			{title: 'Simple snippet', description: 'Simple HTML snippet', url:'http://localhost:8888/j3/media/editors/tinymce/templates/snippet1.html'}
		],
			// Layout
			content_css : "http://localhost:8888/j3/templates/system/css/editor.css",
			importcss_append: true,
			// Advanced Options
			resize: "both",
			image_advtab: true,
			height : "100",
			width : "",

		});

Usunięcie tinyMCE po edycji

Odpięcie edytora przy zdarzeniu focusout() lub blur() ogranicza się do jednej linii kodu i poza usunięciem edytora skutkuje także aktualizacją treści w polu do którego tinyMCE był przypięty.

tinymce.remove('#';+target.attr('id'));

Aby mieć pewność, że kod wtyczki tinyMCE jest wczytany można skorzystać z API Joomla i klasy JPluginHelper:

$editor = JPluginHelper::importPlugin('editors', 'tinymce');

w dniu .

Category
Back to top