Chris Bunk.com

The Problem: In designing a custom content management system for a large knowledge management site I needed the ability for links to be administered separately and have Meta attributes, descriptive text, specific icons, etc. tied to them. I also needed the Content Editor that uses the wysiwygPro editor to insert links from this central link database. The inserted links needed to automatically change in all the content sections when changes in the link database were made.

The Solution: Well the design of the link database was pretty straightforward and I won’t get into that here. The challenge was having all the links change in all the content when a modification to the link database was made. The way I looked at it I had two solutions; one was after making a change to link database a script be run to find all the instances of the old link and do a replace with the new link, descriptive text, icons, etc, or I could insert a php function call like displayLink(id) that gets called as the content page gets rendered. The latter is what I chose.

This raised a subsequent problem. The WYSIWYG Editor I used, wysiwygPro, would not display the php function call like it should. After all it was not html yet. Even if I wrapped an eval() function around it, it would subsequently be static html when saved to the db. So what did I end up doing?

Use a span that displayed like it was a link with an id that corresponded to the id of the database id. The display text was used as the content of the span. I would have the link popup insert html like

<span class="fakeLink" id="1077">Solidification in Sealed Ampoules</span>

By defining in a style sheet the class

.fakeLink{
text-decoration: underline;
color: #0000FF;
}

I get the desired look in the WYSIWYG Editor.

Now to get wysiwygPro to insert that code instead of the normal link I had to make some modifications to hyperlink.php with the insert_link function I changed it to output:

textToReturn= '<span class="fakeLink" id="'+document.document_form.link_id.value+'">'
+document.document_form.description.value+
'</span>&nbsp;';

I also had to have the code that generated the listing of links to pull from the database and include a hidden id element. My popup ended up looking like this

My next task was transforming the span into a function call before it got inserted into the database I accomplished this with a regular expression. The problem I ran into was that wysiwygPro would switch the order of the class and the id on me after submission. On subsequent loads the order would reverse again. So I had to run the submission through a filter to look for either order of class and id appearing. The resultant function was as follows:

function link2func($text){
//the pattern to search for
//$pattern="{<span class=\"fakeLink\" id=\"([^\"]+)\">([^<]*)</span>}";
$pattern="{<span id=\"([^\"]+)\" class=\"fakeLink\">([^<]*)</span>}";
//what to replace occurances with
$replacement="<? displayLink(\${1});/*\${2}*/?>";
//now do the work
$tempText = preg_replace($pattern,$replacement,$text);
//now run it through with the class and id in opposite order
$pattern="{<span class=\"fakeLink\" id=\"([^\"]+)\">([^<]*)</span>}";
//what to replace occurances with
$replacement="<? displayLink(\${1});/*\${2}*/?>";
//now do the work
return preg_replace($pattern,$replacement,$tempText);
}

Notice how I hide the display text in a comment.

Now when a user goes to edit the existing document I needed to transform the function call back into the span. The Function for that is as follows:

function func2link($text){
//the pattern to search for
$pattern="{<\? displayLink\(([0-9]+)\);[\s]*(/\*(([^*]|(\*+([^*/])))*)\*+/)|(//.*)}";
//what to replace occurances with
$replacement="<span id=\"\${1}\" class=\"fakeLink\">\${3}</span>";
//now do the work
$returnText = preg_replace($pattern,$replacement,$text);
return str_replace("?>","",$returnText);
}

Just make sure to wrap the content you pull from the db to display in an eval function so the functions get called. Problem solved.