Multidesk.be » Forums » PHP » Text tussen <h*> en </h*> tags

  • Pagina
  • 1 van 1
0 gasten lezen dit onderwerp.
^ Onderwerp geschreven door Kilian op dinsdag 4 augustus 2009 om 12:27:03.
Kilian heeft nog geen avatar toegevoegd
Multiviteit: 1629
Hallo,

IK ben een CMS aan het maken, en ik zit een beetje vast. Ik wil dat alle text tussen een <h1>, <h2>, ... tag geselecteerd wordt. Zo kan ik bij de navigatie rechtstreekse links naar deze titels maken.

Heeft iemand een idee hoe ik dit voor elkaar krijg? Ik heb al eens met regex aan het proberen geweest, maar het werkte niet goed...

Kilian
^ Reactie #1 geschreven door thekid op dinsdag 4 augustus 2009 om 14:54:09.
thekid's avatar
Multiviteit: 5273
Moderator
wat is je probleem dan met de hex'n?

't zou wel de gemakkelijkste manier zijn hoor
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #2 geschreven door Martijn op dinsdag 4 augustus 2009 om 14:55:27.
Martijn heeft nog geen avatar toegevoegd
Multiviteit: 13785
Beheerder
Regex lijkt me inderdaad de makkelijkste manier.

Bedoel je dat je, zoals hier bij de artikels, wil linken naar de titel zelf via een lijst met linkjes?

Voeg je zelf de H1 in of werk je met BBcode tags?
Met vriendelijke groeten,
Martijn Wouters
^ Reactie #3 geschreven door Kilian op dinsdag 4 augustus 2009 om 17:00:18.
Kilian heeft nog geen avatar toegevoegd
Multiviteit: 1629
Ik had de volgende regex:
PHP
  1.  
  2. $reg='/<h1>(.*)<\/h1>/';
  3. preg_match($reg, $arr['text'], $stitle);
  4. print_r($stitle);
  5.  

De tekst is als volgt:
CODE
  1.  
  2. <p>Onderstaand formulier invullen aub</p>
  3. <h1>text</h1>
  4. <h1>text</h1>
  5.  

Deze tekst wordt door tinymce geregeld. Er is dus rechtstreeks HTML in de database.
De bedoeling is inderdaad hetzelfde als hier op MD. Het liefst zou ik hebben dat dit werkt voor h1 tem h6.

--edit--
Volgende functie doet het:
PHP
  1.  
  2. function getTextBetweenTags($tag, $html, $strict=0)
  3. {
  4.     /*** a new dom object ***/
  5.     $dom = new domDocument;
  6.     /*** load the html into the object ***/
  7.     if($strict==1){
  8.         $dom->loadXML($html);
  9.     } else {
  10.         $dom->loadHTML($html);
  11.     }
  12.     /*** discard white space ***/
  13.     $dom->preserveWhiteSpace = false;
  14.  
  15.         /*** the array to return ***/
  16.                 $out = array();
  17.         for ($c=1; $c<7; $c++){
  18.                 /*** the tag by its tag name ***/
  19.                 $content = $dom->getElementsByTagname('h'.$c);
  20.                 foreach ($content as $item){
  21.                         /*** add node value to the out array ***/
  22.                         $out[] = $item->nodeValue;
  23.                 }
  24.         }
  25.     /*** return the results ***/
  26.     return $out;
  27. }
  28.  

Nu moet ik ze enkel nog bewerken zodat er de h1 tem h6 mee geselecteerd wordt!

**code updated**
Ik heb nu alle tekst, maar de volgeorde gaat verloren indien ik een <h2> tag niet als laatste heb staan.
vb;
CODE
  1.  
  2. <p>Onderstaand formulier invullen aub</p>
  3. <h1>text</h1>
  4. <h2>h2</h2>
  5. <h1>test</h1>
  6. <h1>boe</h1>
  7.  

Er komt dan als resultaat:
Array ( [0] => text [1] => test [2] => boe [3] => h2 )

Hoe los ik dat op?
Deze tekst werd het laatst bewerkt voor 19.04 % door Kilian op dinsdag 4 augustus 2009 om 17:14:03.
^ Reactie #4 geschreven door thekid op dinsdag 4 augustus 2009 om 17:58:59.
thekid's avatar
Multiviteit: 5273
Moderator
wel, het overloopt natuurlijk stap per stap de verschillende h's, hé

via uw scriptje zal de aanpassing niet zo eenvoudig zijn, via uw php script (mits correcte syntax van de regexpr zou het makkelijker moeten gaan)

je kan evt ook gewoon alle html tags opvragen, en indien deze overeenkomt met een h1..6 tag, deze dan toe te voegen aan je array ;)
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #5 geschreven door Kilian op dinsdag 4 augustus 2009 om 19:12:59.
Kilian heeft nog geen avatar toegevoegd
Multiviteit: 1629
Die regex lijkt me het beste, mits ik natuurlijk weet hoe 'm te voermen. Heeft er iemand meer info over?
^ Reactie #6 geschreven door thekid op dinsdag 4 augustus 2009 om 20:35:38.
thekid's avatar
Multiviteit: 5273
Moderator
jammer genoeg dat je geen bbcode gebruikt, anders kon het eenvoudiger mijn inziens

maar 'k ga er eens voor kijken als ik thuis ben, zit nog op mijn werk voor een tijdje :)
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #7 geschreven door thekid op dinsdag 4 augustus 2009 om 23:38:50.
thekid's avatar
Multiviteit: 5273
Moderator
mijn probleem is eigenlijk dat ik niet juist weet hoe php zijn regex'n verwerkt, via .net gebeurd dit per voorkomende match dat er kan gereplaced worden, waardoor je dus steeds hetzelfde element veranderd, tenzij je ook zoekt naar de anchor in de h-tags

dit was voor mij te omzeilen door eerst de regexen om te zetten naar bbcode, en dan deze terug te vervangen (of zoals ik zei, een regex formuleren die h-tags met een anchor erin overslaat) naar htmlcode (brielwerk dus)

uw scriptje was op zich zo slecht niet, maar je verliest idd wel de structuur als je ze oplopend afgaat... Je kan het wisselen door alle tags op te vragen, maar vraagt dan weer meer werk door de server, dusja, 't is een beetje zoeken naar de beste optie, éh
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #8 geschreven door Martijn op woensdag 5 augustus 2009 om 08:22:47.
Martijn heeft nog geen avatar toegevoegd
Multiviteit: 13785
Beheerder
Probleem met jouw manier is dat je er vanuit gaat dat de structuur van de tekst correct is. Dat heb je met regexen minder, of kan je op zijn minst eenvoudig opvangen.

Probeer deze code eens (niet getest, dus er kan ergens nog wel een foutje inzitten):
PHP
  1. <?php
  2.  
  3. preg_replace("/\<h1>(.*)\<\/h1\>/sUi", '<h1><a href="#id">\1</a></h1>', $html);
  4.  
  5. ?>


Op deze manier zou je al een resultaat moeten krijgen zodat je HREF's een anchor worden. Natuurlijk is het nog een kwestie van aan de anchors een zinnige id mee te geven. Dit kan je doen via een callback (preg_replace_callback()).

Best even de code downloaden, want ik merk net dat er bij de preg_replace een backslash ontbreekt bij de tweede parameter. Bij het downloaden van de code, staat die er wel.
Met vriendelijke groeten,
Martijn Wouters
^ Reactie #9 geschreven door Kilian op woensdag 5 augustus 2009 om 10:10:48.
Kilian heeft nog geen avatar toegevoegd
Multiviteit: 1629
Gelukt!
PHP
  1.  
  2. <?php
  3. function callback_links($match){
  4.         $omp=explode($match[1], $match[0]);
  5.         $href='<a href="#'.$match[1].'" class="sitem">'.$match[1].'</a><br />';
  6.         echo $href;
  7. }
  8. function callback_text($match){
  9.         $opmaak=explode($match[1], $match[0]);
  10.         $href=$opmaak[0].'<a name="'.$match[1].'">'.$match[1].'</a>'.$opmaak[1];
  11.         return $href;
  12. }
  13. ...
  14. preg_replace_callback("/\<h[1-6]>(.*)\<\/h[1-6]\>/sUi" ,callback_links  ,$arr['text']);
  15.  

Ik heb bij de 1ste functie van de return wel een echo moeten maken. Op een of andere manier gaf hij ook de tekst weer als ik de return deed. Zo werkt ie ook, alleen iets minder mooi ;)

Kilian
^ Reactie #10 geschreven door Kilian op woensdag 12 augustus 2009 om 12:21:33.
Kilian heeft nog geen avatar toegevoegd
Multiviteit: 1629
Ik loop nog tegen een probleempje aan, met met een regex opgelost zou kunnen worden.
Ik wil dat alle afbeeldingen aanklikbaar zijn (dus er een link rond gezet wordt), om zo op die afbeelding lightbox te activeren. Iemand een idee hoe ik dit oplos?

Opgelost! Ik heb de FCKeditor aangepast, nu kan de gebruiker kiezen.
Misschien een idee om er een artikel van te maken hoe je dit in FCK editor integreert?
Deze tekst werd het laatst bewerkt voor 7.69 % door Kilian op woensdag 12 augustus 2009 om 13:07:50.
^ Reactie #11 geschreven door Cdude op woensdag 12 augustus 2009 om 13:17:32.
Cdude's avatar
Multiviteit: 5427
Eat my shorts :)
Ik wacht vol ongeduld op de publicatie van je artikel (thumbsup)
"Two things are infinite: the universe and human stupidity; and I'm not sure about the universe."
"Friendship is like peeing in your pants : everybody can see it but only u can feel it's warmth"
^ Reactie #12 geschreven door Kilian op woensdag 12 augustus 2009 om 17:49:32.
Kilian heeft nog geen avatar toegevoegd
Multiviteit: 1629
Artikel ingediend! Voor jou echter al een preview: :D

Intro


Lightbox

Lightbox is een javascript welke toelaat om afbeeldingen over de huidige pagina te laten openen. Voorbeelden kan je bekijken op de Lightbox site.

FCKeditor

FCKeditor is een WYSIWYG editor, welke gebruik maakt van javascript. FCKeditor kan worden gebruikt voor een CMS of een blog.
Noot: We maken gebruik van FCKeditor 2.6.4.1

Lightbox combineren met FCKeditor


In het afbeeldingmemu

Om de gebruiker te laten kiezen of er gebruik van Lightbox gemaakt wordt bij een afbeelding of niet in zijn FCKeditor scherm moeten we het bestand fckeditor/editor/dialog/fck_image.html aanpassen:

Zoek het volgende (regel 180-182):
CODE
  1.  
  2. <div id="divLnkBrowseServer" align="right">
  3.         <input type="button" value="Browse Server" fcklang="DlgBtnBrowseServer" onclick="LnkBrowseServer();" />
  4. </div>
  5.  

Voeg toe daaronder:

CODE
  1.  
  2. <div>
  3.         <span fcklang="DlgLnkRel">Lightbox</span><br />
  4.         <select id="txtRel" />
  5.                 <option value="lightbox">Aan</option>
  6.                 <option value="">Uit</option>
  7.         </select><br />
  8. </div>
  9. <div>
  10.         <span fcklang="DlgLnkTitle">Titel:</span><br />
  11.         <input id="txtTitle" style="width: 100%" type="text" /><br />
  12. </div>
  13.  


We hebben nu 2 nieuwe velden in het Link menu gemaakt. Het eerste is een selectbox waar men kan aangeven of er gebruik gemaakt moet worden van Lightbox of niet, het 2de is een optionele titel die verschijnt als er afbeelding op het scherm staat.

Nu gaan we de verwerking van de link regelen. Open hiervoor het bestand fckeditor/editor/dialog/fck_image/fck_image.jf.

Zoek het volgende (regel 192-193):
CODE
  1.  
  2. GetE('txtLnkUrl').value  = sLinkUrl ;
  3. GetE('cmbLnkTarget').value      = oLink.target ;
  4.  


Voeg toe daaronder:
CODE
  1.  
  2. GetE('txtTitle').value = oLink.title;
  3. GetE('txtRel').value = oLink.rel;
  4.  


Zoek het volgende (regel 267-268):
CODE
  1.  
  2. SetAttribute( oLink, '_fcksavedurl', sLnkUrl ) ;
  3. SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ;
  4.  


Voeg toe daaronder:
CODE
  1.  
  2. SetAttribute( oLink, 'rel', GetE('txtRel').value);
  3. SetAttribute( oLink, 'title', GetE('txtTitle').value );
  4.  


Nu wordt er in de link naar de afbeelding rel="lightbox" gezet indien de gebruiker dit wil. De titel wordt ook aangevuld. Indien de gebruiker geen gebruik wenst te maken van Lightbox komt er gewoon rel="".

In het linkmenu

Het zou natuurlijk ook kunnen dat er tekst staat in plaats als een afbeelding als link. Ook hier is het mogelijk om Lightbox te gebruiken voor de afbeelding waartoe je linkt.
Hiervoor verander je het volgende:
- Open het bestand fckeditor/editor/dialog/fck_link.html
- Zoek het volgende (regel 63-65):
CODE
  1.  
  2. <div id="divBrowseServer">
  3. <input type="button" value="Browse Server" fckLang="DlgBtnBrowseServer" onclick="BrowseServer();" />
  4. </div>
  5.  


Voeg toe daaronder:
CODE
  1.  
  2. <div>
  3.         <span fcklang="DlgLnkRel">Afbeelding</span><br />
  4.         <select id="txtRel" />
  5.                 <option value="">Nee</option>
  6.                 <option value="lightbox">Ja</option>
  7.         </select><br />
  8. </div>
  9. <div>
  10.         <span fcklang="DlgLnkTitle">Afbeelding titel:</span><br />
  11.         <input id="txtTitle" style="width: 100%" type="text" /><br />
  12. </div>
  13.  


We hebben nu weer 2 velden gemaakt. Het eerste is een selectbox waar de gebruiker kan opgeven of hij naar een afbeelding linkt of niet, het 2de is de optionele titel.

Voor de verwerking veranderen we in het bestand fckeditor/editor/dialog/fck_link/fck_link.js het volgende:

Zoek volgende code (regel 477-478):
CODE
  1.  
  2. GetE('txtAttContentType').value = oLink.type ;
  3. GetE('txtAttCharSet').value          = oLink.charset ;
  4.  


Voeg toe daaronder:
CODE
  1.  
  2. GetE('txtTitle').value = oLink.title;
  3. GetE('txtRel').value = oLink.rel;
  4.  


Zoek volgende code (regel 771-772):
CODE
  1.  
  2. SetAttribute( oLink, 'type'          , GetE('txtAttContentType').value ) ;
  3. SetAttribute( oLink, 'charset'  , GetE('txtAttCharSet').value ) ;
  4.  


Voeg toe daaronder:
CODE
  1.  
  2. SetAttribute( oLink, 'rel', GetE('txtRel').value);
  3. SetAttribute( oLink, 'title', GetE('txtTitle').value );
  4.  


Ziezo, nu is het ook mogelijk om op een tekstje te klikken en Lightbox te activeren. Hoewel...

Lightbox installeren


Om Lightbox te kunnen gebruiken moeten we het natuurlijk eerst installeren.
Neem nu het volgende voorbeeld:

Ons bestand waar de tekst, van FCKeditor afkomstig, staat is pagina.html.
In diezelfde map staat ook een mapje "js", waar al onze javascript (dus ook Lightbox) in staat. We voegen in de head van onze pagina.html het volgende toe:
CODE
  1.  
  2. <script type="text/javascript" src="js/prototype.js"></script>
  3. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  4. <script type="text/javascript" src="js/lightbox.js"></script>
  5.  


Nu werkt onze Lightbox echter nog steeds niet. We moeten nog de CSS openen.
Stel dat al onze CSS (dus ook die van Lightbox) in een mapje "css" staat. Dan voegen we in onze head het volgende toe:
CODE
  1.  
  2. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  3.  


Ziezo, nu zou je als je op je afbeeling klikt een mooie Lightbox moeten zien

Problemen


Ik zie de extra velden niet in mijn FCKeditor!

Ikzelf had dit probleem ook. Dit komt omdat de FCKeditor venstertjes niet herladen werden. Het is echter zeer simpel op te lossen:
- Firefox: klik rechts in een veldje (zoals URL). Ga vervolgens naar dit deelvenster en klip op deelvenster vernieuwen
- Internet Explorer: Klik recht in het venstertje (niet in een veld!) en klik op vernieuwen

Andere problemen

Voor andere problemen kan je best in het forum terecht, daar deze problemen dikwijls hetzelfde effect hebben, maar een andere oorzaak. We zullen je echer steeds proberen te helpen!

Lui of weinig tijd? Kijk hier!


Moest je lui zijn, en bovenstaande stappen niet willen uitvoeren (of gewoon geen tijd hebben) dan bied ik hieronder de aangepaste bestanden aan. Je hoeft ze gewoon te overschrijven.

Bestandjes: f16d376ac3c4ea075816e2c9efca91bf.zip
Deze tekst werd het laatst bewerkt voor 0.26 % door Kilian op woensdag 12 augustus 2009 om 17:50:02.
^ Reactie #13 geschreven door Cdude op woensdag 12 augustus 2009 om 18:01:47.
Cdude's avatar
Multiviteit: 5427
Eat my shorts :)
Thanx _O_
Mocht ik het nu nog snappen(blush)

Ik begrijp een Lightbox, ik ken een teksteditor, ik begrijp alleen niet goed wat het nut is van deze te combineren.
Ik dacht dat je "gewoon" de LB hoefde te integreren in je code.

Of zit ik er helemaal naast?
Kan je eens in "simpele taal " uitleggen wat je deed aub?
"Two things are infinite: the universe and human stupidity; and I'm not sure about the universe."
"Friendship is like peeing in your pants : everybody can see it but only u can feel it's warmth"
^ Reactie #14 geschreven door Kilian op woensdag 12 augustus 2009 om 18:06:41.
Kilian heeft nog geen avatar toegevoegd
Multiviteit: 1629
Wat ik wilde was dat in mijn CMS het mogelijk was om afbeeldingen in klein formaat op de website weer te geven, en dan een link erachter te zetten zodat je ze in groot formaat kan zien. Je kan dit doet door een nieuwe pagina te openen, maar zoals het bij Lightbox gebeurt is eigenlijk netter vind ik.
Klik maar eens op het voorbeeld op hun site. Wat heb je het liefst, een nieuwe pagina of die oplossing?

Als ik BBcode had gebruikt had ik dit gewoon kunnen parsen indien het nodig was. Met FCKeditor wordt er echter gewoon HTML aangemaakt, waardoor ik de FCKeditor moest wijzigen, zodat de gewenste code ook in de HTML zat. Dit doet deze "aanpassing".

Kilian
^ Reactie #15 geschreven door Cdude op woensdag 12 augustus 2009 om 18:11:50.
Cdude's avatar
Multiviteit: 5427
Eat my shorts :)
BBcode ?
"Two things are infinite: the universe and human stupidity; and I'm not sure about the universe."
"Friendship is like peeing in your pants : everybody can see it but only u can feel it's warmth"
^ Reactie #16 geschreven door Kilian op woensdag 12 augustus 2009 om 18:22:30.
Kilian heeft nog geen avatar toegevoegd
Multiviteit: 1629
BBcode wordt ook hier op MD gebruikt. Het zijn de tags waarmeer je je bericht opmaakt geeft ([x]blabla[/x])
  • Pagina
  • 1 van 1

Snel-antwoordformulier
Toon uitgebreid antwoordformulier Bericht nalezen Bericht plaatsen