Søger du en specifik kategori?

 



Oprettet fre. d. 21. oktober 2011 kl. 23:06

olebole
olebole (216.723 point)
Guidens karaktér
1
2
3
4
5

BB-Code editor for Eksperten

Da Eksperten ikke har implementeret et interface til formatering med BB-koder, tilbyder jeg hermed en (nød)løsning. Tag ikke denne guide som en tutorial, men som et tilbud om 'stumper' til et stykke værktøj. Testet i IE, FF, Opera og Safari under Win7.
 
Tilsigtet brugeroplevelse
Formålet er at give en bruger af Eksperten en ny knap i browserens favoritbar. Den menubar, de fleste browsere er udstyret med til at gemme de oftest benyttede favoritter/bookmarks i.

Et klik på knappen, mens brugeren befinder sig på en spørgsmålsside, implementerer en knapbar lige over tekstfeltet i bunden af siden. Den indeholder en række knapper, som ved klik indsætter de mest anvendelige BB-koder i feltet.

Ligesom med enhver anden editor, kan man placere cursoren et sted i feltet og klikke en formateringsknap. Herved indsættes de valgte BB-tags, og cursoren placeres automatisk mellem de to tags. Klikkes knappen, mens der er udvalgt tekst i feltet, bliver de to tags indsat, så de omkranser den udvalgte tekst. Cursoren placeres normalt efter slut-tagget - men er der tale om color-, font- eller url-tags, bliver cursoren anbragt efter lighedstegnet i start-tagget.  Intentionen er at få anbragt cursoren, hvor der mest naturligt/sandsynligt vil være brug for den.

Metode
Knappen i browseren oprettes ved hjælp af et link med en bookmarklet (se Links nedenfor). Den indskriver et JavaScript element i bunden af sidens BODY. Elementets src-attribut refererer til en JS-fil - expbbedit.js - som ligger på en webserver. Det kan være en server på WWW eller på en lokal server på PC'en. Hovedsagen er, at den hentes via HTTP-protokollen. Lægges filen på en lokal server, skal denne naturligvis være tændt, når editoren skal bruges.

Når scriptet er hentet, indskriver det knapbaren, bestående af et DIV - indeholdende knapper i form af DIVs, som er styled med Ekspertens eget CSS for knapper. Knapperne har tooltips, der beskriver anvendelse og shortcut.

'Installering'
Begynd med at kopiere denne kode over i en tom JS-fil. Gem den som expbbedit.js, og læg den på en server:


(function(){ // ExpBBEdit 1.2
  // Hvis vi er på en spørgsmålsside
    var elmTxt = document.getElementById("newreplytext");
  // Hvis vi er på en guideside
    if (!elmTxt) elmTxt = document.getElementById("text");
  // Hvis vi er på en internpostside
    if (!elmTxt) elmTxt = document.getElementsByName("message")[0];
  // Hvis vi er på en Opret Spørgsmålsside
    if (!elmTxt) elmTxt = document.getElementById("newquestiontext");
  // Hvis vi er på en anden side, stopper festen her!
    if (!elmTxt) return;
   
    var aBtns = [
        ["B", "Bold (Ctrl+B)", "b"],
        ["I", "Italic (Ctrl+I)", "i"],
        ["@", "@UserName: (Ctrl+A)", "@"],
        ["BOX", "Blue Box (Ctrl+D)", "div"],
        ["PRE", "Preform/Monosp\nText (Ctrl+M)", "pre"],
        ["URL", "URL (Ctrl+U)", "url"],
        ["FNT", "Font (Ctrl+F)", "font"],
        ["SIZ", "Font Size (Ctrl+S)", "size"],
        ["COL", "Color/Hue (Ctrl+H)", "color"]
    ];
    var oCSS = {
        bar: {
            height: "28px",
            background: "#cbcbcb",
            cursor: "default"
        },
        btn: {
            cssFloat: "left",
            float: "left",
            width: "35px",
            height: "16px",
            marginLeft: "5px",
            paddingTop: "5px",
            border: "1px solid #999",
            borderBottomColor: "#888",
            background: "#01bce0 url('/images/button_w86.gif') no-repeat center center",
            color: "#fff",
            font: "bold 11px arial, sans-serif",
            textAlign: "center"
        }
    };
    function insertButton(elmPar, aOpts) {
        var elmBtn = document.createElement("div"),
        css = elmBtn.style;
        elmPar.appendChild(elmBtn);
        elmBtn.appendChild(document.createTextNode(aOpts[0]));
        elmBtn.setAttribute("title", aOpts[1]);
        for (x in oCSS.btn) css[x] = oCSS.btn[x];
        if (aOpts[0].length<3) css.width = "24px";
        if (elmBtn.addEventListener) elmBtn.addEventListener("mousedown", function(){ExpBBEdit.format(aOpts[2])}, false);
        else if (elmBtn.attachEvent) elmBtn.attachEvent("onmousedown", function(){ExpBBEdit.format(aOpts[2])});
    };
    function insertBar() {
        var elmBar = document.createElement("div"),
        css = elmBar.style, x;
        for (x in oCSS.bar) css[x] = oCSS.bar[x];
        elmTxt.parentNode.insertBefore(elmBar, elmTxt);
        return elmBar;
    };

    var elmBar = insertBar();
    for (var i=0,j=aBtns.length; i<j; i++) insertButton(elmBar, aBtns[ i]);
    elmTxt.focus();

/*******************************************************************************/

    function format(sTag) {
        var bAT = false;
        if (sTag=="@") {
            sTag = "b";
            bAT = true;
        }
        var val = elmTxt.value, nS = elmTxt.selectionStart,
        nE = elmTxt.selectionEnd;
        if (val.charAt(nE-1)==" ") nE--;
        var a = val.substr(0, nS),
        b = val.substring(nS, nE),
        c = val.substring(nE),
        sSTag = (bAT ? "@" : "") + "[" + sTag + ((/font|color|url|size/.test(sTag)) ? "=]" : "]"),
        sETag = "[/" + sTag + "]" + (bAT ? ":" : ""),
        nSLen = sSTag.length,
        nELen = sETag.length, n;
        elmTxt.value = a + sSTag + b + sETag + c;
        if (nE-nS<1) {
            n = sSTag.indexOf("=")<0 ? nS+nSLen : nS+nSLen-1;
            elmTxt.selectionStart = n;
            elmTxt.selectionEnd = n;
        } else {
            n = sSTag.indexOf("=")<0 ? nE+nSLen+nELen : nS+nSLen-1;
            elmTxt.selectionStart = n;
            elmTxt.selectionEnd = n;
        }
        setTimeout("ExpBBEdit.focus()", 1);
    };
   
    function formatFromKey(e) {
        e = e ? e : event;
        if (!e.ctrlKey) return;
        switch (e.keyCode) {
            case 65: format("@"); break
            case 66: format("b"); break
            case 68: format("div"); break
            case 70: format("font"); break
            case 72: format("color"); break
            case 73: format("i"); break
            case 77: format("pre"); break
            case 83: format("size"); break
            case 85: format("url"); break
            default: return;
        }
        if (e.stopPropagation) e.stopPropagation();
        if (e.preventDefault) e.preventDefault();
        e.cancelBubble = true;
        e.returnValue = false;
    };
   
    function doFocus() {
        elmTxt.focus();
    };
   
    window.ExpBBEdit = {
        "format": format,
        "formatFromKey": formatFromKey,
        "focus": doFocus
    };
   
    if (elmTxt.addEventListener) elmTxt.addEventListener("keydown", ExpBBEdit.formatFromKey, false);
    else if (elmTxt.attachEvent) elmTxt.attachEvent("onkeydown", ExpBBEdit.formatFromKey, false);
})();



Kopier derefter denne kode til BODY'en af et ellers tomt HTML-dokument:


<p>
    <a href='java script:o=document.createElement("script");o.type="text/javascript";o.src="http://localhost/expbbedit.js";document.body.appendChild(o);void(0)'>ExpBBEdit</a>
</p>



Begynd med at slette det mellemrum, Eksperten sætter ind mellem 'java' og 'script' i begyndelsen af linkets href-attribut. Det skal stå i ét ord. Ret derefter URL'en, så den stemmer overens med JS-filens placering.

Load filen i en browser og højreklik på linket. Vælg Gem som favorit..., og klik OK, hvis browseren advarer om, at du er ved at gemme et script som Favorit. Det er jo netop det, der er meningen.

Anvendelse
Når du er logget ind og står på en spørgsmålsside, klikker du på favoritten/bookmark'et ExpBBEdit. Det skulle implementere knapbaren lige over tekstfeltet.

Du kan skrive noget tekst og derefter prøve at sætte cursoren et eller sted i feltet og klikke på f.eks. B. Herved indsættes BB-tags for Bold.

Udvælges noget tekst, inden der klikkes på knappen, anbringes de to tags, så de omkranser den udvalgte tekst. Cursoren vil altid blive forsøgt anbragt der, hvor det giver mest mening.

Bemærk: Når man dobbeltklikker på et ord, vil visse browsere ikke bare udvælge ordet - men også det mellemrum, der måtte følge. Det tager editoren automatisk højde for og lader mellemrummet høre til udenfor BB-koden.

Versionering
Har du ønsker eller idéer, vil jeg meget gerne høre om dem. Jeg agter at versionere scriptet og føre en changelog her i guiden, så det er muligt altid at have sidste nye features.

Hjælp og spørgsmål om virkemåde, ændringer, o.lign. vil jeg bede om, bliver stillet i en spørgsmålstråd under JS.
 

ChangeLog

ExpBBEdit 1.2 (19/10-2011):
Rettet fejl: 'PRE' er ændret til 'Preform./Monosp. Text' - Ctrl+M (Ctrl+P åbner altid printdialogen i IE)
Tilføjet: @ knap, der indsætter '@[ b][/b]:'. Beregnet til henvendelser til navngiven bruger i en kommentar. Shortcut A - for 'AT' (engelsk)
Tilføjett: Mulighed for at bruge editoren på en side til oprettelse af spørgsmål

ExpBBEdit 1.1 (19/09-2011):
Rettet fejl: Det nu er muligt at bruge Ctrl med andre taster end de, der er defineret i ExpBBEdit.
Tilføjet: SIZ knap, der giver mulighed for at ændre skriftstørrelse.
Rettet: Det er nu muligt at bruge editoren på både spørgsmåls-, guide- og internpostsider.
Rettet: Knapstørrelse og -tekst formindsket en anelse.

ExpBBEdit 1.0 (18/09-2011)


Links
BB-koder på Eksperten:
    http://www.eksperten.dk/guide/1325

Bookmarklets:
    http://en.wikipedia.org/wiki/Bookmarklet
    http://www.bookmarklets.com/

Skrevet søn. d. 18. september 2011 kl. 10:59| #1


Skrevet søn. d. 18. september 2011 kl. 14:15| #2

splazz (60.068 point)
majbom.com
-> #1 - intet mindre!

det er en superfed funktion du har lavet her Ole - det er sq imponerende (og irriterende på en måde) at man selv skal lave sådan noget på et så stort forum i år 2011

TAK Ole!

Skrevet søn. d. 18. september 2011 kl. 18:16| #3

splazz (60.068 point)
majbom.com
umiddelbart virker CTRL+C og CTRL+V ikke når jeg bruger "baren"...

firefox 6, win7

Skrevet søn. d. 18. september 2011 kl. 19:50| #4

olebole (216.723 point)
Det har jeg opdaget. Det skyldes, jeg cancel'er eventen, uanset hvilket tegn, der bliver tastet - bare Ctrl er trykket ned. En default:return i slutningen af switchen does the trick.

Der er en version 1.1 på vej. Den kommer op i aften eller i morgen. Den giver også mulighed for at formatere teksten her i guide interfacet - ligesom der nu også er en knap for tekststørrelse.

- og tak for roserne, Guys  =)

Skrevet søn. d. 18. september 2011 kl. 21:33| #5

pstidsen (20.944 point)
Et ord: SEJT!

Mht. til versionering:
*Implementering af flere tags
*Mulighed for at vælge farve på tekst uden at kende RGB koder. Altså når man trykker på COL, popper der en lille boks op med de mest almindelige farver man kan vælge og så bliver RGB autofillet. Evt. samme funktion med FNT.

Skrevet søn. d. 18. september 2011 kl. 22:57| #6

#6

Webserver. Bruger du kun én PC, kan du jo lægge den lokalt, men vil du have glæde af den flere steder, kan du jo lægge den ud på www ;o)

Skrevet søn. d. 18. september 2011 kl. 23:38| #7

olebole (216.723 point)
Michael, jeg må lige spørge om noget her  =)

Det ser ud, som om du i dit seneste indlæg kommenterer på et indlæg, som Eksperten har spist. Er det korrekt? Du kommenterer øjensynligt på indlæg #6 - men dit eget indlæg har nummer 6

Skrevet man. d. 19. september 2011 kl. 01:10| #8

olebole (216.723 point)
@pstidsen: Der kommer efterhånden flere tags og tag-kombinationer - men bredden af baren og ønsket om overskuelighed begrænser antallet.

Jeg implementerer hverken color eller font picker. Editoren er primært lavet med tanke på Ekspertens kodeho'der - og de formodes at være inde i farvekoder og understøttede fonts ... KISS *o)

På den anden side er der ingen, der forbyder dig eller andre at modificere koden, som I måtte ønske det  =)

Skrevet man. d. 19. september 2011 kl. 07:31| #9


Skrevet man. d. 19. september 2011 kl. 20:57| #10


Skrevet man. d. 19. september 2011 kl. 22:02| #11

pstidsen (20.944 point)
#8: For der er nemlig kun "kodeho'der" her på siden? Jeg vil da sige den tool du har lavet lige netop IKKE er til "kodeho'der". De kan vel deres BB Codes selv??

Skrevet tir. d. 20. september 2011 kl. 15:24| #12


Skrevet ons. d. 21. september 2011 kl. 04:30| #13

#12

Jeg sidder med FF, og det virker fint. Hvordan ser stien ud til din js-fil?

Skrevet ons. d. 21. september 2011 kl. 08:00| #14

http://home1.stofanet.dk/ (...)
Her ligger filerne og det virker i IE, men som sagt driller det i FF.
Jeg er overbevist om at det er FF der laver et eller andet om...

Skrevet ons. d. 21. september 2011 kl. 08:01| #15


Skrevet ons. d. 21. september 2011 kl. 08:01| #16


Skrevet ons. d. 21. september 2011 kl. 11:29| #17

Nej, det fandt jeg ud af i #9 ;o)

Skrevet ons. d. 21. september 2011 kl. 22:11| #18

pstidsen (20.944 point)
jo uden http:// virker, så må man klippe-klistre om i adresselinjen.

Skrevet tor. d. 22. september 2011 kl. 17:14| #19


Skrevet tor. d. 22. september 2011 kl. 20:25| #20

splazz (60.068 point)
majbom.com
#10 skulle have været:

-> #9 - ?



-> #11 - det er netop for ikke at skulle skrive alle de tags hver gang..

det må sq være op til exp.dk selv at lave noget der kan gøre alle tilfredse - men hvad, man drømmer vel også allesammen om at få mange penge mellem hænderne en dag og det er der sq nok større sandsynlighed for

Skrevet tir. d. 27. september 2011 kl. 15:20| #21

Det er snedigt lavet det der :)

Skrevet tir. d. 27. september 2011 kl. 21:40| #22

pstidsen (20.944 point)
Hvad med integration i "Opret spørgsmål" interfacet?

Skrevet søn. d. 02. oktober 2011 kl. 13:31| #23

olebole (216.723 point)
@pstidsen: Som sagt er du mere end velkommen til at videreudvikle din egen version. Du burde bare kunne indsætte en enkelt if-sætning i begyndelsen af koden - lige før det sted, hvor 'festen stopper':

if (!elmTxt) elmTxt = document.getElementById("newquestiontext");

Skrevet ons. d. 19. oktober 2011 kl. 00:24| #24

olebole (216.723 point)
@pstidsen: Så er der en opdateret version, som bl.a. opfylder dit ønske fra #22  *o)

Skrevet tor. d. 20. oktober 2011 kl. 13:00| #25

pstidsen (20.944 point)
Det ser da ikke helt rigtigt ud? http://gratisupload.dk/ (...)

Skrevet fre. d. 21. oktober 2011 kl. 17:30| #26

olebole (216.723 point)
@pstidsen: Er det noget, du vil dele med os andre?  =)

Skrevet fre. d. 21. oktober 2011 kl. 22:34| #27

pstidsen (20.944 point)
Ja, men E.. vil ikke... gratisupload.dk/billede/thumb/667610/full/

Skrevet fre. d. 21. oktober 2011 kl. 23:09| #28

olebole (216.723 point)
Så virker det igen. Det var denne linje, der lavede ged i suppen (uden mellemrum før i):

insertButton(elmBar, aBtns[ i]);

Skrevet tor. d. 22. december 2011 kl. 01:12| #29

hansepeter2 (3.630 point)
Hvad med en citeringsfunktion? :)

Skrevet tir. d. 10. januar 2012 kl. 15:57| #30

olebole (216.723 point)
@hansepeter2: Det er på vej, men jeg skal først have gennemskrevet hele editoren og lavet en bedre struktur. Den blev skrevet lidt hurtigt - i frustration!  *o)

Skrevet ons. d. 11. januar 2012 kl. 18:47| #31

hansepeter2 (3.630 point)
Sådan har jeg det også af og til. Jeg lavede selv funktionen, men den blev ikke særlig ie-venlig :)

Skrevet søn. d. 29. januar 2012 kl. 19:25| #32

inteeeL (5.821 point)
Jeg vil lige benytte mig af lejligheden til at komplimentere din meget veludførte kode. Den fungerer perfekt. Alle små detaljer såsom at kranse taggene uden om cursoren samt den markerede test er udført til punkt og prikke. Her er der en person, der ved hvad han laver, må man sige! ;-)

Jeg ville lige høre, om man må benytte koden til videreudvikling af egne scripts, eller om du på nogen måder forbeholder eventuelle rettigheder?

Well done!

Skrevet tor. d. 09. februar 2012 kl. 12:16| #33

pstidsen (20.944 point)
inteeeL: Se #8. Der skriver olebole:
På den anden side er der ingen, der forbyder dig eller andre at modificere koden, som I måtte ønske det  =)

Skriv en kommentar



Mest populære guides

Guidens karakter
!!!Karaktér: 3
21 stemmer
03/02 - 2009
Af: old-faithful

At finde en anden persons IP-adresse

Enhver Internetbruger har en IP-adresse, der i princippet kan spores tilbage til hans fysiske adresse. Artiklen ser nærmere på nogle metoder til at finde andres IP-adresse (fx en tyv, der har stjålet din PC), samt...
Guidens karakter
!!!Karaktér: 3
23 stemmer
02/02 - 2009
Af: old-faithful

Introduktion til trådløst netværk og access points

Artiklen introducerer grundbegreberne bag trådløse netværk. Standarder, sikkerhed og rækkevidde gennemgås. Artiklen kan også bruges til at danne et overblik over begreber, inden et eventuelt køb af access point.
Guidens karakter
!!!Karaktér: 4
38 stemmer
02/02 - 2009
Af: jkrons

Dato- og tidsberegninger i Excel

En introduktion til simple beregninger med dato og tid i Excel. Opdateret med afsnit om beregning af tillæg.
Excel  |  Læs »

Log ind

   









Tips & Tricks fra PC World

Teaser billede

Her er seks Google Labs-funktioner, som du skal slå til med det samme

Gmail Labs giver dig adgang til en masse smarte funktioner, som Googles ingeniører leger med i øjeblikket.


Anmeldelser fra PC World

Teaser billede

Test: Samsung Galaxy S4 er et hit - trods gøglertricks

Kan Samsung beholde førertrøjen i det store Android-race? Galaxy S4 er smækfyldt med innovative funktioner, men også med en del gøgl. Er det for meget? Få vores dom over Samsungs nye topmodel.


Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...


Nyheder fra PC World

Teaser billede

Tre smarte trick som gør Windows 8 bedre

Boot direkte til skrivebordet, få en strategisk godt placeret luk-knap og slip for at logge ind. Her er tre tips til Windows 8, som gør det nemmere at blive venner med styresystemet.


Nyheder fra Computerworld

Teaser billede

Galleri: Her er Googles nyeste værktøj og legetøj

Google har i denne uge afholdt udviklerkonferencen I/O i San Francisco. Se her hvad søgegiganten kunne præsentere af nyskabelser.


IT Kurser
Samarbejdspartnere

Udgiver · © 2013 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger