Dunque iniziando abbiamo 2 passaggi necessari per integrare questa funzionalità

1. Script

2. html che compone il bbcode (a ogni modifica necessita rieffettuare il recache del bbcode)

1. SCRIPT (inseritelo nel file principale del template globale)

<script type="text/javascript">
function selectCode(a)
{
// Get ID of code block
var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];

// Not IE
if (window.getSelection)
{
var s = window.getSelection();
// Safari
if (s.setBaseAndExtent)
{
s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
}
// Firefox and Opera
else
{
var r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}
}
// Some older browsers
else if (document.getSelection)
{
var s = document.getSelection();
var r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}
// IE
else if (document.selection)
{
var r = document.body.createTextRange();
r.moveToElementText(e);
r.select();
}
}

</script>

2. HTML del BBCode "code" (andate in look & feel > bbcode > Code)

<pre class='prettyprint' style="max-height:100px; overflow:auto;"><div style="float:right;padding-right:10px;width:40px; -moz-border-radius: 3px 3px 3px 3px; text-align:right;"><a href="#" onclick="selectCode(this); return false;"><img title="Seleziona tutto" src="/public/style_images/splat/rte_icons/align_center.png"></a></div><code>{content}</code></pre>

OPPURE V2

<style type="text/css">
pre.prettyprint div#codice {
transition: all 0.6s ease-in-out 0s;
/* Firefox 4 */
-moz-transition: all 0.6s ease-in-out 0s;
/* Safari and Chrome */
-webkit-transition: all 0.6s ease-in-out 0s;
/* Opera */
-o-transition: all 0.6s ease-in-out 0s;
opacivity:0.1;
float:right;
}
pre:hover.prettyprint div#codice {
opacivity:1;
float:right;
padding-right:10px;
width:40px;
-moz-border-radius: 3px 3px 3px 3px;
text-align:right;
background: none repeat scroll 0 0 #CCCCCC;
}
</style>

<pre class='prettyprint' style="max-height:150px; overflow:auto;"><div id="codice"><a href="#" onclick="selectCode(this); return false;"><img title="Seleziona tutto" src="/public/style_images/master/rte_icons/align_center.png"></a></div><code>{content}</code></pre>

AGGIORNAMENTO: ho sistemato il codice ed ora funziona egregiamente

ho risolto il tutto utilizzando lo stesso script cambiando il "PRE" in "CODE"

e modificato l'html del bbcode code in

<pre class='prettyprint' style="max-height:100px; overflow:auto;"><div style="float:right;padding-right:10px;width:100px; background: url('/public/style_images/splat/page.png') repeat-x scroll 0 50% #E4E4E4; -moz-border-radius: 3px 3px 3px 3px; text-align:right;"><a href="#" onclick="selectCode(this); return false;"><img title="Seleziona tutto" src="/public/style_images/splat/rte_icons/align_center.png"></a></div><code>{content}</code></pre>

funziona tutto praticamente ... domani posto anche gli screen di come si potrebbe potenziare (o video rappresentativo e glielo mando a invisionpower)

Maa non ho capito precisamente cosa fa

ti faccio un video e te lo metto su youtube ... almeno qualcosa mi viene xD

comunque funziona perfettamente ora!

non capisco bene ai fini pratici e le applicazioni del suo uso....

Per i forum che utilizzano tanto il codebox questo serve! ... specialmente forum che condivisono link di un programma free con una moltitudine di link e codebox ... la cosa viene semplificata secondo me.

provo a fare un esempio nuovamente con youtube con le nuove personalizzazioni

Modificato 20 Febbraio 201114 anni da PoDo

Si forse inizio a capire, scusa ma sono limitato.

Quindi sarebbe un code ma con già selezionato tutto quello che c'è dentro?

si .. necessita dello script perciò è consigliabile inserirlo nel template che si usa!

Comunque se qualcuno vuole crearci il custom bbcode da php sarebbe più ordinato anche se non cambia nulla funzionalmente.

ottimo lavoro

aggiungere un linck checker sarebbe ideale

Modificato 24 Febbraio 201114 anni da isoka

scusate, ma il primo codice dove va inserito? Ok, nel Global Template, Ma Dove????? In che Punto?

Va inserito prima della chiusura del tag </head>

ecco qui ... hanno realizzato la hook codetoolbar!