Avatar billede buxxy Praktikant
23. juli 2009 - 15:19 Der er 4 kommentarer og
1 løsning

BBCode color, forkert placering

Hej Eksperter!

Først vil jeg lægge ud med at sige det 112% ærligt som det er: Jeg har i flere år rodet med CMS-systemet PHP-Fusion. For ca. 1 års tid siden, kom der en ny version af systemet på gaden. Denne nye version har desværre en fejl, som endnu INGEN har kunne præstere at løse. Det gælder udviklingsholdet bag de officielle supportsider, samt et uhav af folk som jeg selv, der "kun" har en u-officiel hjælpeside/supportside. Med andre ord - så er vi rigtig mange der har forsøgt os ad - uden det er lykkedes det for nogen af os.

Nu til problemets kerne: Hvis man vil bruge knappen BBCode for farver/color, så markerer man den valgte tekst, trykker på knappen for farver (BBCoden color), vælger farve og trykker igen på knappen. Så er den valgte tekst "indhegnet" f.eks. som :

Farvet tekst

Det er helt ok - og virker som det skal. I FF vel og mærke. Desværre ikke i IE7/8.

I IE versionerne ser koden i stedet ud som - når man vælger at farve en tekst:

Farvet tekst

Dvs. at BBKoden bliver indsat EFTER den markerede valgte tekst - og altså ikke således at den "indhegner" teksten med BBKoden.

Et eksempel kan ses på vores egen side - i vores replikboks ude i højre side: http://phpfusion-tips.dk/

Man behøver ikke engang at skrive en replik - før man kan se problemet. I IE vel og mærke.

Prøv her at skrive et par bogstaver, trykke på farve-knappen, vælg farve, og tryk så på farve-knappen igen. Her kan man tydeligt se/fremkalde fejlen/problemet.

Vi er mange her der ville blive ovenud rigtig meget glade, hvis her er et klogt hovede, der netop kan gennemskue det så mange, ja jeg lyver nok ikke hvis jeg siger flere 100, der har forsøgt sig ad ikke kan. Der i blandt også selve dev.teamet for PHP-Fusion.

Jeg poster herunder 3 koder.

color_bbcode_include.php

<?php
/*-------------------------------------------------------+
| PHP-Fusion Content Management System
| Copyright (C) 2002 - 2008 Nick Jones
| http://www.php-fusion.co.uk/
+--------------------------------------------------------+
| Filename: color_bbcode_include.php
| Author: Wooya
+--------------------------------------------------------+
| This program is released as free software under the
| Affero GPL license. You can redistribute it and/or
| modify it under the terms of this license which you
| can read by viewing the included agpl.txt or online
| at www.gnu.org/licenses/agpl.html. Removal of this
| copyright header is strictly prohibited without
| written permission from the original author(s).
+--------------------------------------------------------*/
if (!defined("IN_FUSION")) { die("Access Denied"); }

$text = preg_replace('#\[color=(black|blue|brown|cyan|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|violet|white|yellow)\](.*?)\[/color\]#si', '<span style=\'color:\1\'>\2</span>', $text);
$text = preg_replace('#\[color=([\#a-f0-9]*?)\](.*?)\[/color\]#si', '<span style=\'color:\1\'>\2</span>', $text);
?>


color_bbcode_include_var.php

<?php
/*-------------------------------------------------------+
| PHP-Fusion Content Management System
| Copyright (C) 2002 - 2008 Nick Jones
| http://www.php-fusion.co.uk/
+--------------------------------------------------------+
| Filename: color_bbcode_include_var.php
| Author: Wooya
+--------------------------------------------------------+
| This program is released as free software under the
| Affero GPL license. You can redistribute it and/or
| modify it under the terms of this license which you
| can read by viewing the included agpl.txt or online
| at www.gnu.org/licenses/agpl.html. Removal of this
| copyright header is strictly prohibited without
| written permission from the original author(s).
+--------------------------------------------------------*/
if (!defined("IN_FUSION")) { die("Access Denied"); }

$__BBCODE__[] =
array(
"description"        =>    $locale['bb_color_description'],
"value"            =>    "color",
"bbcode_start"        =>    "",
"bbcode_end"        =>    "
",
"usage"            =>    "[color=#".$locale['bb_color_hex']."]".$locale['bb_color_usage']."[/color]",
"onclick"        =>    "return overlay(this, 'bbcode_color_map_".$textarea_name."', 'rightbottom');",
"onmouseover"        =>    "",
"onmouseout"        =>    "",
"html_start"        =>    "<div id='bbcode_color_map_".$textarea_name."' class='tbl1' style='display:none;border:1px solid black;z-index:1;position:absolute;width:220px;height:160px' onclick=\"overlayclose('bbcode_color_map_".$textarea_name."');\">",
"includejscript"    =>    "color_bbcode_include_js.js",
"calljscript"        =>    "ColorMap('".$textarea_name."', '".$inputform_name."');",
"phpfunction"        =>    "",
"html_middle"        =>    "",
"html_end"        =>    "</div>",
);
?>


color_bbcode_include_js.js

//based on TinyMce color map plugin - modified by wooya
function showMapColor(color, mapId) {
    document.getElementById("selectedMapColor" + mapId).style.backgroundColor = color;
    document.getElementById("selectedMapColorBox" + mapId).value = color;
}

//based on TinyMce color map plugin - modified by wooya
function ColorMap(elname, formname) {
    var html = "";
    var colors = new Array(
        "#000000","#000033","#000066","#000099","#0000cc","#0000ff","#330000","#330033",
        "#330066","#330099","#3300cc","#3300ff","#660000","#660033","#660066","#660099",
        "#6600cc","#6600ff","#990000","#990033","#990066","#990099","#9900cc","#9900ff",
        "#cc0000","#cc0033","#cc0066","#cc0099","#cc00cc","#cc00ff","#ff0000","#ff0033",
        "#ff0066","#ff0099","#ff00cc","#ff00ff","#003300","#003333","#003366","#003399",
        "#0033cc","#0033ff","#333300","#333333","#333366","#333399","#3333cc","#3333ff",
        "#663300","#663333","#663366","#663399","#6633cc","#6633ff","#993300","#993333",
        "#993366","#993399","#9933cc","#9933ff","#cc3300","#cc3333","#cc3366","#cc3399",
        "#cc33cc","#cc33ff","#ff3300","#ff3333","#ff3366","#ff3399","#ff33cc","#ff33ff",
        "#006600","#006633","#006666","#006699","#0066cc","#0066ff","#336600","#336633",
        "#336666","#336699","#3366cc","#3366ff","#666600","#666633","#666666","#666699",
        "#6666cc","#6666ff","#996600","#996633","#996666","#996699","#9966cc","#9966ff",
        "#cc6600","#cc6633","#cc6666","#cc6699","#cc66cc","#cc66ff","#ff6600","#ff6633",
        "#ff6666","#ff6699","#ff66cc","#ff66ff","#009900","#009933","#009966","#009999",
        "#0099cc","#0099ff","#339900","#339933","#339966","#339999","#3399cc","#3399ff",
        "#669900","#669933","#669966","#669999","#6699cc","#6699ff","#999900","#999933",
        "#999966","#999999","#9999cc","#9999ff","#cc9900","#cc9933","#cc9966","#cc9999",
        "#cc99cc","#cc99ff","#ff9900","#ff9933","#ff9966","#ff9999","#ff99cc","#ff99ff",
        "#00cc00","#00cc33","#00cc66","#00cc99","#00cccc","#00ccff","#33cc00","#33cc33",
        "#33cc66","#33cc99","#33cccc","#33ccff","#66cc00","#66cc33","#66cc66","#66cc99",
        "#66cccc","#66ccff","#99cc00","#99cc33","#99cc66","#99cc99","#99cccc","#99ccff",
        "#cccc00","#cccc33","#cccc66","#cccc99","#cccccc","#ccccff","#ffcc00","#ffcc33",
        "#ffcc66","#ffcc99","#ffcccc","#ffccff","#00ff00","#00ff33","#00ff66","#00ff99",
        "#00ffcc","#00ffff","#33ff00","#33ff33","#33ff66","#33ff99","#33ffcc","#33ffff",
        "#66ff00","#66ff33","#66ff66","#66ff99","#66ffcc","#66ffff","#99ff00","#99ff33",
        "#99ff66","#99ff99","#99ffcc","#99ffff","#ccff00","#ccff33","#ccff66","#ccff99",
        "#ccffcc","#ccffff","#ffff00","#ffff33","#ffff66","#ffff99","#ffffcc","#ffffff"
    );
   
    html += '<table border="0" cellspacing="1" cellpadding="0" class="tbl"><tr>';
    for (var i=0; i<colors.length; i++) {
        if (formname == undefined) {
            html += "<td class='tbl1' style='width:10px;height:10px;cursor:crosshair;background-color:" + colors[i] + "' onclick=\"addText('" + elname + "', '[color=" + colors[i] + "]', '[/color]');return false;\" onfocus=\"showMapColor('" + colors[i] +  "', '" + elname + "');\" onmouseover=\"showMapColor('" + colors[i] + "', '" + elname + "');\">"
        } else {
            html += "<td class='tbl1' style='width:10px;height:10px;cursor:crosshair;background-color:" + colors[i] + "' onclick=\"addText('" + elname + "', '[color=" + colors[i] + "]', '[/color]', '" + formname + "');return false;\" onfocus=\"showMapColor('" + colors[i] +  "', '" + elname + "');\" onmouseover=\"showMapColor('" + colors[i] + "', '" + elname + "');\">"
        }
        html += '</td>';
        if ((i+1) % 18 == 0)    html += '</tr><tr>';
    }
    html += '<tr><td colspan="18">'
    + '<table width="100%" border="0" cellspacing="0" cellpadding="0">'
    + '<tr><td id="selectedMapColor' + elname + '" width="50%" height="16">'
    + '</td><td width="50%">'
    + '<input id="selectedMapColorBox' + elname + '" name="selectedMapColorBox' + elname + '" type="text" size="7" maxlength="7" style="text-align:center;font-weight:bold;width:100%" class="textbox" value="" />'
    + '</td></tr>'
    + '</table>'
    + '</td></tr>'
    + '</table>';

    document.write(html);
}

--------------

Mvh.
Buxxy.

OBS: Jeg undskylder hvis debatten er oprettet under forkert emne. Men jeg vidste ikke rigtigt - det er jo både PHP samt JavaScript her er tale om. Så bær gerne over med mig, hvis den er oprettet under forkert emne.
Avatar billede per-d Nybegynder
23. juli 2009 - 22:37 #1
Hvis så mange har prøvet så er det nok ikke sikkert at løsning med javascript er den helt rigtige. Har i overvejet at lave systemet om sådan at det bliver kombineret med ajax?

Jeg forestiller mig dette:

En bruger skriver en tekst, han marker en række ord, klikker på farve og vælger f.eks. lyserød.

Nu kommer det spændende:
Det er muligt med javascipt at hente det markerede ned i en variabel. Denne variabel sammen med hele teksten, plus farve. Bliver nu i et ajax kald sendt til et php script.

Her laver man via noget regex tilføjelsen af bb color koden rundt om det markedede. Det hele bliver nu sendt tilbage. Og ved hjælp af javascript udskifter man nu den oprindelse tekst med den tekst der lige har været en tur forbi et php script.

En alternativ løsning, ved jeg godt.
Avatar billede buxxy Praktikant
24. juli 2009 - 17:32 #2
Hej per-d.

Tak for dit besyv!

Dog havde jeg jo håbet på, at her var et skarpt hovede der evt. netop kunne se den fejl/mangel som vi andre ikke kan få øje på.

Jeg selv sidder nemlig ikke i Dev.Teamet - og at skulle lave det hele om, ja det er jeg ikke sikkert på om det er det der sigtes efter i den lange ende.

Jeg venter og ser om andre evt. også måtte have deres besyv/input at "fodre debatten" med. ;)

Endnu engang mange tak for sit svar, per-d.

Mvh.
Buxxy.
Avatar billede buxxy Praktikant
26. juli 2009 - 03:57 #3
Skulle her være et klogt hovede der mener at kunne skimte fejlen - ja så er input velkommen!
Avatar billede buxxy Praktikant
02. august 2009 - 02:09 #4
Er her virkelig slet ingen af "Danmarks aller-klogeste" hoveder = brugerne på eksperten.dk der kan hitte/se fejlen ?
Avatar billede buxxy Praktikant
29. oktober 2010 - 15:41 #5
Nå, der er nu kommet et bug-fix til denne:

Erstat onclick med onmousedown.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester