JavaScript - Tlačítka

JamesProCz · 2013-04-24 11:28:31

Zdravím,

dělám si admina na web a dělám editor na newsky...Potřeboval bych vědět jak udělat toto:
Mám button například na Tučné písmo,kliknu vyvolá se javascript okno,kde bude input type="text" kam zadám nějakej text dám ok,a do textarey se mi vloži ten text+předtím textem a zatím textem <b></b>..
Jako BBCode ale stačilo by mi to v JS...

Dík za odpověd.

JF · 2013-04-24 11:47:43

Skúšali ste použiť vyhľadávač? napr Google.

JamesProCz · 2013-04-25 10:06:51

Zajisté,ale přesně nevím jak to hledat.

VaclavMacurek · 2013-05-04 21:47:33

No, vypadá to jako potřeba nějakého javascriptového editoru.

Zrovna nedávno jsem jeden hledal (na forum.zive.cz). Já měl navíc dvě podmínky:
1. musí nabízet předem nahrané soubory
2. musí podporovat bb kód

A podle popisu by nejlepším řešením měl být MarkItUp. V něm se dá velmi přesně nastavit spousta věcí. Dokonce si člověk může nastavit i své vlastní značky.

A to, co popisujete, že potřebujete, tedy vložit něco jiného před text a něco jiného za (označený) text, to se dá v MarkItUp velmi snadno zařídit.

Zkrátka se v nastavení editoru napíše například

{name:'Tučné', openWith:'[tucne]', closeWith:'[/tucne]', afterInsert: function(){NahledOdstavce();} },

Kde to nejdůležitější je:
name = popisek tlačítka
openWith = text před označeným textem
closeWith= text za označeným textem

Dají se vložit i texty, které jsou získané z obsahu stránky (například bloků vložených pomocí AJAXu).

JamesProCz · 2013-05-05 15:24:53

Jojo,hele prosímtě..Mohl bys mi poradit? Nějak mi to nejde nainstalovat na web....Nic se mi nezobrazuje

VaclavMacurek · 2013-05-05 20:49:53

Takže:

MarkItUp vyžaduje jQuery. Bez jQuery to nebude fungovat.

<link rel="stylesheet" href="jQuery/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="jQuery/jquery.markitup.css" type="text/css">

<script language="javascript" src="jQuery/jquery-1.9.1.js" type="text/javascript"></script>
<script language="javascript" src="jQuery/jquery-ui-1.10.2.js" type="text/javascript"></script>
<script language="javascript" src="jQuery/jquery.tinyscrollbar.js" type="text/javascript"></script>
<script language="javascript" src="jQuery/jquery.markitup.js" type="text/javascript"></script>

V prvním css souboru je uložený vzhled pro jQuery UI (není nutný), v druhém je uložen vzhled MarkItUp.

A Tinyscrollbar není pro MarkItUp potřeba.

MarkItUp má 1 JavaScriptový soubor, který se jmenuje jquery.markitup.js - a k němu jsou dva css soubory s nastavením vzhledu editoru. V jednom je základní vzhled editoru, v druhém je vzhled tlačítek. Mimochodem, soubory grafiky je samozřejmě také nutné nahrát. Ledaže byste si vytvořil vlastní a zalinkoval je.

Všechny tři soubory je třeba správně zalinkovat. CSS soubory je možné sloučit do jednoho, který může mít název jquery.markitup.css (viz kód výše).

Přímo do kódu stránky nebo do dalšího javascriptového souboru je potřeba napsat proměnnou s nastavením editoru (opis mého nastavení je na závěr) a především s tímto kódem, který vybranou textareu upraví

$('#TextOdstavce').markItUp(NastaveniEditoru);

var NastaveniEditoru = {
	onEnter: {keepDefault: false, replaceWith: ''},
	onShiftEnter: {keepDefault: false, replaceWith: '\n'},
	onCtrlEnter: {keepDefault: false, replaceWith: '\n'},
	markupSet:	[	
		{name:'Tučné', openWith:'[tucne]', closeWith:'[/tucne]', afterInsert: function(){NahledOdstavce();} },
		{name:'Kurzíva', openWith:'[kurziva]', closeWith:'[/kurziva]', afterInsert: function(){NahledOdstavce();}  },
		{name:'Podtržené', openWith:'[podtrzene]', closeWith:'[/podtrzene]', afterInsert: function(){NahledOdstavce();} },
		{separator:'---------------' },
		{name:'Zarovnat vlevo', openWith:'[vlevo]', closeWith:'[/vlevo]', afterInsert: function(){NahledOdstavce();} },
		{name:'Zarovnat vpravo', openWith:'[vpravo]', closeWith:'[/vpravo]', afterInsert: function(){NahledOdstavce();} },
		{name:'Zarovnat na střed', openWith:'[stred]', closeWith:'[/stred]', afterInsert: function(){NahledOdstavce();} },
		{name:'Zarovnat do bloku', openWith:'[blok]', closeWith:'[/blok]', afterInsert: function(){NahledOdstavce();} },
		{separator:'---------------' },
		{name:'Nečíslovaná položka seznamu', openWith:'[polozkaseznamu-necislovana]', closeWith:'[polozkaseznamu-necislovana]', afterInsert: function(){NahledOdstavce();} },
		{name:'Číslovaná položka seznamu', openWith:'[polozkaseznamu-cislovana]', closeWith:'[polozkaseznamu-cislovana]', afterInsert: function(){NahledOdstavce();} },
		{separator:'---------------' },
		{name:'Sloupec tabulky', openWith:'[tabulka-sloupec]', closeWith:'[/tabulka-sloupec]', afterInsert: function(){NahledOdstavce();} },
		{name:'Řádek tabulky', openWith:'[tabulka-radek]', closeWith:'[/tabulka-radek]', afterInsert: function(){NahledOdstavce();} },
		{separator:'---------------' },
		{name:'Šířka prvku', beforeInsert: function(){ $('#Sirky').dialog('open'); }},
		{name:'Výška prvku', beforeInsert: function(){ $('#Vysky').dialog('open'); }},
		{separator:'---------------' },		
		{name:'Obrázek', beforeInsert: function(){ $('#Obrazky').dialog('open'); }},
		{name:'Soubor', beforeInsert: function(){ $('#Soubory').dialog('open'); }},
		{name:'Odkaz', openWith:'[odkaz="[![Odkaz]!]"]', closeWith:'[/odkaz]', placeHolder: 'Popis odkazu', afterInsert: function(){NahledOdstavce();} }
	]
};

V případě dalších problémů mohu poslat Kasandru, Vy si vyzkoušíte, co potřebujete - a pak to zkopírujete do svých stránek.

JamesProCz · 2013-05-06 10:53:23

Tak jeslti bys to mohl nějak zkusit,mě to totiž vůbec nejde...Tak jestli bys mi stím mohl pomoct.

VaclavMacurek · 2013-05-06 11:06:37

Dobrá, dobrá.

Napište mi na e-mail (místní uživatelské jméno + seznam.cz), klidně k tomu přibalte ty internetové stránky, kam to chcete vložit a já se na to podívám. V odpovědi pošlu Kasandru a než to vyřeším v těch zaslaných stránkách, Vy budete mít čas podívat se, jak to mám udělané já.

JamesProCz · 2013-05-06 11:30:57

Email odeslán.

VaclavMacurek · 2013-05-06 12:36:09

Vyřešeno. Opraveno. Více informací v e-mailu, který jsem odeslal.

JamesProCz · 2013-05-06 16:24:22

Děkuji moc...Toto téma je vyřešené.

#1 2013-04-24 11:28:31

Re: JavaScript - Tlačítka

#2 2013-04-24 11:47:43

Re: JavaScript - Tlačítka

#3 2013-04-25 10:06:51

Re: JavaScript - Tlačítka

#4 2013-05-04 21:47:33

Re: JavaScript - Tlačítka

#5 2013-05-05 15:24:53

Re: JavaScript - Tlačítka

#6 2013-05-05 20:49:53

Re: JavaScript - Tlačítka

#7 2013-05-06 10:53:23

Re: JavaScript - Tlačítka

#8 2013-05-06 11:06:37

Re: JavaScript - Tlačítka

#9 2013-05-06 11:30:57

Re: JavaScript - Tlačítka

#10 2013-05-06 12:36:09

Re: JavaScript - Tlačítka

#11 2013-05-06 16:24:22

Re: JavaScript - Tlačítka

Zápatí