Adaugarea mai multor instrumente pentru editorul de mesaje

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Adaugarea mai multor instrumente pentru editorul de mesaje

Mesaj Scris de Zeus la data de Lun 23 Dec - 21:20

Adaugarea mai multor instrumente pentru editorul de mesaje


Salutare tuturor,  La revedere
In tutorialul de astazi am sa va arat cum puteti adauga mai multe instrumente pentru editorul de mesaje. Pentru adauga un nou instrument, trebuie sa urmati 3 pasi simpli. In cazul in care doriti mai multe instrumente, va trebui sa repetati pasii de mai jos de cate ori doriti.

Demonstratie:


Alegeti una din cele trei variante propuse:
1. un instrument nou cu icon
2. un instrument nou cu text
3. mai multe instrumente adaugate tip "drop down"

Daca doriti un instrument cu icon urmati pasii de mai jos:
1. Adaugati urmatorul cod in:
Panou de administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript ~> Creati un nou cod JavaScript
Cod:
$(function(){
 $(function(){
 $('<a class="sceditor-button" unselectable="on" title="Denumire buton">
 <div unselectable="on" style="background-image:url(LINK ICON)"></div>
 </a>').insertBefore('.sceditor-button-size').click(function(){
 $('#text_editor_textarea').sceditor("instance").insertText("Continut")})
 })
});

  • Inlocuiti "LINK ICON" cu adresa URL a unei imagini de dimenxiunea 16x16 pixeli.
  • Inlocuiti "Continut" cu continutul dorit.
    Exemplu de continut pe care il puteti adauga:
    Cod:
    [color=red][b]Text-ul dorit[/b][/color]

  • Inlocuiti "Denumire buton" cu denumirea instrumentului dvs. Acest lucru va fi afisat atunci cand pozitionati cursorul pe buton.

In continutul instrumentului puteti adauga si balize BBCode, in cazul in care nu doriti un simplu text. Daca nu stiti ce sunt balizele BBCode, puteti citi acest tutorial.

2. Daca nu ati facut deja acest lucru, activati gestiunea codurilor JavaScript.


3. Odata ce am terminat modificarile, setati vizualizarea scriptului pentru toate paginile si apasati pe  validare .

Daca doriti un instrument fara icon, urmati pasii de mai jos:
1. Adaugati urmatorul cod in:
Panou de administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript ~> Creati un nou cod JavaScript
Cod:
$(function(){
 $(function(){
 $('<a class="sceditor-button" unselectable="on" title="Denumire buton"><b>Buton
 </b></a>').insertBefore('.sceditor-button-size').click(function(){
 $('#text_editor_textarea').sceditor("instance").insertText("Continut")})
 })
});

  • Inlocuiti "Buton" cu numele butonului dvs.
  • Inlocuiti "Continut" cu continutul dorit.
    Exemplu de continut pe care il puteti adauga:
    Cod:
    [color=orange][i]Text-ul dorit[/i][/color]

  • Inlocuiti "Denumire buton" cu denumirea instrumentului dvs. Acest lucru va fi afisat atunci cand pozitionati cursorul pe buton.


2. Daca nu ati facut deja acest lucru, activati gestiunea codurilor JavaScript.


3. Odata ce am terminat modificarile, setati vizualizarea scriptului pentru toate paginile si apasati pe  validare .

4. Adaugati urmatorul cod in:
Panou de administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS
Cod:
.sceditor-button {
font-size: 11px !important;
color: #777777 !important;
width: auto !important;
text-indent: 0px !important;
}

.sceditor-button b{
position: relative;
top: 10px;
}

In codul CSS de mai sus inlocuiti #777777 cu culoarea dorita. Puteti accesa acest ghid pentru o gama variata de culori.

Daca doriti mai multe instrumente adaugate tip "drop down" urmati pasii de mai jos:
1. Adaugati urmatorul cod in:
Panou de administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript ~> Creati un nou cod JavaScript
Cod:
$(function(){
 $(function(){
 $('<div class="instrumente" style="float: left;"><a class="sceditor-button buton1" unselectable="on" title="Denumire buton"><b>Nume Buton</b></a><ul>
<li><a class="sceditor-button [b][color=#ff3333]buton2[/color][/b]" unselectable="on" title="Denumire buton"><b>Buton</b></a></li>
</ul></div>').insertBefore('.sceditor-button-size');
$('.[b][color=#ff3333]buton2[/color][/b]').click(function(){
 $('#text_editor_textarea').sceditor("instance").insertText("Continut Buton")});
});
});

Cautati:
<li><a class="sceditor-button buton2" unselectable="on" title="Denumire buton"><b>Buton</b></a></li>







Adaugati imediat dupa:
<li><a class="sceditor-button buton2" unselectable="on" title="Denumire buton"><b>Buton</b></a></li>


  • Unde scrie buton2 inlocuiti cu buton3.
  • Unde scrie Denumire Buton inlocuiti cu denumirea dorita.
  • Unde scrie Buton inlocuiti cu numele butonului.

Cautati:
$('.buton2').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("Continut Buton")});
});

Adaugati imediat dupa:
$('.buton2').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("Continut Buton")});
});


  • Unde scrie buton2 inlocuiti cu buton3.
  • Continut Buton reprezinta continutul care va fi inserat in editor.


Pentru a va iesi codul trebuie sa numerotati butoanele cu buton3, buton4, buton5 pentru a nu va incurca in coduri.  Fericit

Pentru a-i adauga icon instrumentului tip drop down, cautati:
Cod:
<b>Nume Buton</b>
Inlocuiti cu:
Cod:
<img src="LINK ICON" />

2. Daca nu ati facut deja acest lucru, activati gestiunea codurilor JavaScript.


3. Odata ce am terminat modificarile, setati vizualizarea scriptului pentru toate paginile si apasati pe  validare .

4. Adaugati urmatorul cod in:
Panou de administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS
Cod:
.sceditor-button {
font-size: 11px !important;
color: #777 !important;
width: auto !important;
text-indent: 0px !important;
}

.sceditor-button b{position: relative;top: 10px;}

.instrumente ul{
   display: none;background: white;
   position: absolute;
   margin-top: 24px;
   box-shadow: 0px 0px 5px #adadad;
   padding: 5px;
}
.instrumente:hover > ul {
display: block;
}

Si asta a fost tot!  Noroc
   
Tutorial scris de Zeus dupa o idee fg-coding.

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Zeus
Administrator
Administrator

masculin

Mesaje : 3976
Localizare : Bucuresti, Romania
Data de inscriere : 19/02/2012
Multumiri : 613
Niciun avertisment

http://help.forumgratuit.ro

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum