Hi All,

I want to create a user friendly back end in which a person can update her personal information without knowledge about html tags.

If i used strip_tags function to strip all html tags, so that the form looks very clean. The trouble is that when a user edit her information and hit update button, all the html format will be gone.

So what do i do to reserve all html tags? And if she wants to type in xxx with a url, then how do i know to convert it to a link. For example: yahoo, http://www.yahoo.com.

Any suggestions would be greatly appreciated

trang

What you're describing sounds mildly like what a Wiki or other web content management systems do. They generate the HTML behind the scenes, and present a simplified language to the user for use.

For example, a lot of web bulletin board systems use some sort of code you can put in a post to link in an image or make a bulleted list or whatever. You could emulate this behavior by creating a notation for links (and any other HTML-type things you want to have available) and then writing code that translates that into the appropriate HTML when it is being displayed.

Regards,
Jake.

Well, to reserve all tags, you'd simply NOT use strip_tags. If you'd like to have a set of allowable HTML tags, the easiest thing to do is to parse out all the tags that you want to keep and strip the rest. Alternatively, you can implement a similar system to the "forum code" that you see here, where people use HTML-esque tags using square brackets instead of angle brackets. For example, [brace]b]bold words[brace]/b] instead of <b>bold words</b>.

In that case, you can simply strip ALL html tags, and use preg_replace() to replace the accepted forum code tags with HTML tags.

Converting URLs to links is also just a matter of regular expression search and replace.

There are lots of examples for doing these types of conversions online. Try looking at the function preg_replace() for an idea of where to start.
  http://www.php.net/preg_replace


Another method would be to use the preg_replace_callback() function to manage all your HTML links. A callback function is a function that gets called when some event happens. In preg_replace_callback, your function is called whenever a pattern is matched. The callback function takes the place of the replacement pattern. It's only parameter is the array of strings that matched your pattern.


For example, suppose I had this callback function:

function linkify($matches)
{
    return "<a href=\"{$matches[0]}\">{$matches[0]}</a>";
}

This function clearly expects the entire pattern to match a URL. We can use this to create a hyperlink out of a regularly-typed URL.

Here's a sample program for you to play with:

<?php

function linkify($matches)
{
    return "<a href=\"{$matches[0]}\">{$matches[0]}</a>";
}

$pattern = '!\bhttps?://([\w\-]+\.)+[a-zA-Z]{2,3}(/(\S+)?)?\b!';

/* Pattern above matches any link starting with http:// or https://,
 * followed by one or more groups of at least one word-character (\w)
 * and a period (\.), followed by either two or three letters ([a-zA-Z]),
 * followed by an optional slash, and any number of optional non-whitespace
 * characters.
 * The \b assertions force the pattern to begin and end at a "word boundary",
 *
 *
 * This is by no means a "complete" URL matching pattern, but it's short and
 * matches lots of URLs, including:
 * http://www.bigaction.org
 * http://p2p.wrox.com/topic.asp?TOPIC_ID=5482
 * https://login.yahoo.com/config/login
 *
 */

$textarea = isset($_POST['some_text'])? $_POST['some_text'] : "
Feel free to type some sample text here, including some links.
For example:
  http://www.bigaction.org
  http://www.bigaction.org/
  https://login.yahoo.com/config/login
  http://p2p.wrox.com/topic.asp?TOPIC_ID=5482
";

echo <<<EOF
<form method="post" action="{$_SERVER['PHP_SELF']}">
  <textarea name="some_text" cols="60" rows="8">{$textarea}</textarea>
  <br />
  <input type="submit" name="submit_button" value="Linkify!" />
</form>

EOF;

if (isset($_POST['some_text']))
{
    echo "\n";
    echo "<pre>\n";
    echo preg_replace_callback($pattern, 'linkify', $_POST['some_text']);
    echo "</pre>\n";
}


?>


Take care,

Nik
http://www.bigaction.org/

Thank you very much Nik. You are so kind.

1. I just learned valuable linkify from you. It's very cool.
2. I have tried to used HTML-esques tags and then replace with html tags. It works fine but not userfriendly. I have some users with old traditions and they hate seeing weird tags. They prefer blank text.
Let me give you more info: right now there are some pages were done in html. I transfered the datata (including html tags) into the database and display back. This part is done.
Now at the updating form, data is shown with html tags, which bugging users. If i replace all <> with []in a form and replace back when the form is submited, which are easy, but they are not happy. They want blank text. So I'm stuck. Do you have another alternative?
For example:
**************************************************
[ul][li]hello[/li][/ul][p][a href="http://www.yahoo.com"]WROX[/a][/p]
************************************************** *****
When they look at the above line, they got upset. They don't know where the real text is.

Thank you so much
td

I know what you're going through!

I have a client which I need to come up with some kind of user-friendly interface for posting content on their website. I have considered going with a more complex WYSIWYG interface. It can be done with JavaScript directly in the browser and the look and feel be designed to resemble something like Microsoft Word or FrontPage. There are a few tutorials and complete scripts already out there. Going with this approach will allow the user to post plain text if they so desire or format it.

Some of the tutorials that I've seen also tend to rely on Microsoft only technologies..

I have also considered a file upload form in which the user would simply use FrontPage or Mozilla/NS Composer or whatever to create the HTML file and then upload the file and manipulate it to fit the template using PHP.

Both options are pretty complex to write from scratch.
But its another approach to consider.

http://www.google.com/search?q=WYSIWYG+JavaScript

Hope that helps!
: )
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::

It sounds like you have different translation models depending on where you're displaying the text.

When displaying it as a web page, you want to keep the HTML. When displaying it as plain text to a user, you *don't* want HTML tags in there. The second scenario might cause problems if you're displaying the text in some sort of input field where a user can edit the text and resubmit it to the site -- you don't want all of the original formatting (bold, italics, etc) removed when the user submits the new version.

So basically, you need to come up with a way of preserving the original text and translating it on-the-fly using the appropriate translation algorithm, or storing all the different translations of the original text.

For example, let's take a look at the p2p forums. I've thought for a while that the p2p forums should remove forum code from the plain-text emails it sends to forum subscribers. Assuming Wrox implements this, we'll have three translation models: straight passthru, HTML convert, and plain-text convert.

straight passthru: This means that the "translation" does nothing -- the original text submitted by the author is returned.

HTML convert: This means that all forum code is converted to HTML, and any special HTML characters in the original text are converted to their entity equivalents; e.g. < is converted to &lt;. This is used for displaying a thread in a user's browser or as the body of an HTML message.

Plain text convert: This means that all forum code is stripped from the message to avoid cluttering the actual text. This could be used for text-based browsers or plain-text email subscribers.



I suggest you decide how many translation models you need, and write each one separately as a function that accepts the original text and returns the translated text. That way, your site can always call some sort of translation callback function to generate the appropriate text for the context of the application.


I hope this makes sense; I tried to keep things high-level, but I might have over-simplified.


, but convert the forum code to HTML for subscribers who prefer HTML emails.

The original post should be stored as entered by the user.

Take care,

Nik
http://www.bigaction.org/

Thank you everyone for giving me your valuable ideas especially Nik. I really appreciate your detailed explanations for everything. I will come back with more questions.

Take care

td