Using another HTML editor

Pokud Vám z nějakého důvodu nevyhovuje stávající HTML editor a chcete do administrace "podstrčit" jiný editor, můžete to zvládnout pomocí událostí stávajících komponent.

Pro ukázku jsme zvolili free editor Aloha (http://www.aloha-editor.org/). Je potřeba stáhnout si zdrojový kód komponenty, nahrát jej na server a především si přečíst návod na implementaci tohoto editoru do stránek (každý editor je od jiného tvůrce, má jiné názvy souborů, proměnných atd...).

Uložení na server

Stažené soubory musíme uložit do takového umístění, kam bude mít vygenerovaná stránka přístup. Jde nyní především o zapnuté SEO, kdy se adresáře, které nejsou uvedeny jako vyjímka v souboru .htaccess, tváří jako virtuální a jsou zpravovávány jako SEO odkazy. Můžete zdrojový kód umístit do adresáře /repository, který již je uveden jako vyjímka v tomto souboru, nebo můžete použít adresář vlastní. My zde vytvoříme adresář /js a nahrajeme do něj zdrojové kódy do podadresáře aloha. Zmodifikovaný soubor .htaccess, pak může vypadat následovně:

Options +FollowSymlinks

RewriteEngine on
RewriteRule ^repository/.*$ - [PT]
RewriteRule ^admin/.*$ - [PT]
RewriteRule ^cache/.*$ - [PT]
RewriteRule ^visual-php-core/.*$ - [PT]
RewriteRule ^install/.*$ - [PT]
RewriteRule ^js/.*$ - [PT]

RewriteRule ^(.+)/(.*) /index.php?seoParams=$1/$2 [L,QSA]
RewriteRule ^.*\..*$ - [PT]
RewriteRule ^(.+) /index.php?seoParams=$1 [L,QSA]

Jak je vidět, adresář js je zde uveden jako vyjímka a nebude tedy zpracován pomocí SEO odkazů.

Zobrazení editoru v editaci pole v administraci

Abychom mohli zobrazit náš vlastní kód komponenty, vytvoříme pole s SQL typem TEXT a komponentou READONLY. Pro zobrazení samotného editoru potřebujeme upravit událost onGetCode:

// vložím do stránky JavaScript
addHeadHtml('<script type="text/javascript" src="'.PROJECTURL.'js/aloha/aloha/aloha.js"></script>
	     <script type="text/javascript" src="'.PROJECTURL.'js/aloha/aloha/plugins/com.gentics.aloha.plugins.Format/plugin.js"></script>
	     <script type="text/javascript" src="'.PROJECTURL.'js/aloha/aloha/plugins/com.gentics.aloha.plugins.Table/plugin.js"></script>
	     <script type="text/javascript" src="'.PROJECTURL.'js/aloha/aloha/plugins/com.gentics.aloha.plugins.List/plugin.js"></script>
	     <script type="text/javascript" src="'.PROJECTURL.'js/aloha/aloha/plugins/com.gentics.aloha.plugins.HighlightEditables/plugin.js"></script>');
	
addHeadHtml('<script type="text/javascript">
GENTICS.Aloha.settings = {
	"i18n": {"current": "en"},
	"plugins": {
		"com.gentics.aloha.plugins.GCN": {
			"enabled": false
		},
		"com.gentics.aloha.plugins.Format": {
			config : [ "b", "i","u","del","sub","sup", "p", "h1", "h2", "h3", "h4", "h5", "h6", "pre"],
		  	editables : {
				heading1 	: [ "b", "i", "u", "del", "sub", "sup"  ],
				heading2 	: [ "b", "i", "u", "del", "sub", "sup"  ],
				heading3 	: [ "b", "i", "u", "del", "sub", "sup"  ]
		  	}
		}
 	},
 	"errorhandling" : false
};

$(document).ready(function() {
	// mark the editable parts
	$("#'.$this->htmlId.'").aloha();
});
</script>');

// vlozim TEXTAREA, abychom mohli obsah zaslat formulářem (pokud je obsah prázdný, vkládáme mezeru pomocí  , aby bylo možné do oblasti vůbec kliknout)
echo "<textarea name='".$this->htmlName."' id='".$this->htmlId."'>".($recordValues[$this->name] ? $recordValues[$this->name] : " ")."</textarea>";

Do stránky vkládáme JavaScripty pomocí funkce addHeadHtml(). Cestu tvoříme s pomocí konstanty PROJECTURL, aby bylo možné projekt přenést na jinou doménu bez nutnosti úprav zdrojového kódu. Dále využíváme proměnných htmlName a htmlId objektu komponenty READONLY. O správné hodnoty se Visual PHP™ postará sama.

Komponentě Aloha je potřeba říci, který HTML prvek má být editovatelný. Proto voláme

$("#'.$this->htmlId.'").aloha();

kam systém vloží správné ID html tagu.

Zobrazení

Výsledný editor pak vypadá následovně


Podobně lze použít i další editory, stačí jen prostudovat strukturu a předat potřebné parametry do HTML stránky.

Powered by Visual PHP ™