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

JamesProCz
Člen
Registrován: 2013-03-22
Příspěvky: 19

Re: JavaScript - Tlačítka

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.

Offline

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

JF
Endora rádce
Místo: ....nice u Plzně
Registrován: 2010-06-22
Příspěvky: 11,876

Re: JavaScript - Tlačítka

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


Ján Fačkovec - Endora.cz by Webglobe
Email, Web, Webadmin, Webmail, Nápověda, Ceník

Offline

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

JamesProCz
Člen
Registrován: 2013-03-22
Příspěvky: 19

Re: JavaScript - Tlačítka

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

Offline

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

VaclavMacurek
Člen
Registrován: 2009-12-09
Příspěvky: 124

Re: JavaScript - Tlačítka

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).

Offline

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

JamesProCz
Člen
Registrován: 2013-03-22
Příspěvky: 19

Re: JavaScript - Tlačítka

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

Offline

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

VaclavMacurek
Člen
Registrován: 2009-12-09
Příspěvky: 124

Re: JavaScript - Tlačítka

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.

Offline

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

JamesProCz
Člen
Registrován: 2013-03-22
Příspěvky: 19

Re: JavaScript - Tlačítka

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

Offline

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

VaclavMacurek
Člen
Registrován: 2009-12-09
Příspěvky: 124

Re: JavaScript - Tlačítka

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á.

Offline

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

JamesProCz
Člen
Registrován: 2013-03-22
Příspěvky: 19

Re: JavaScript - Tlačítka

Email odeslán.

Offline

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

VaclavMacurek
Člen
Registrován: 2009-12-09
Příspěvky: 124

Re: JavaScript - Tlačítka

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

Offline

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

JamesProCz
Člen
Registrován: 2013-03-22
Příspěvky: 19

Re: JavaScript - Tlačítka

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

Offline

Zápatí

Založeno na FluxBB | CZ a SK