BBcode and the \n

[Heero]

Hi All,

I am making some BBcode for my CMS and I've run into an interesting issue.

I allow the users to make lists and stuff and when they click on the list button, basically it prompts them for list items and they keep entering until they press cancel. And then the list BBcode apears in the textarea. I've used the javascript code "\n" to make the list items appear on different rows. So an example would be:

[CODE]
[*list]
[*]item 1
[*]item 2
/*list]
[/CODE]

Note: I've added the * because the BBcode on this form converts it to a <ul> tag.

All fine and dandy. The problem is I use the PHP code nl2br to convert \n into <br> so that when users are typing in content we may allow them to keep paragraphs. So the problem becomes clear now.

When outputting the list code, I get this code:

[CODE]
<ul><br />
<li>item 1</li><br />
<li>item 2</li><br />
</ul>
[/CODE]

Which is not what I want....any suggestions on how to avoid this?

[Gruzin]

I've found some code, u can tyr it:

<script type="text/javascript">
// insertcode is used for bold, italic, underline and quote and just
// wraps the tags around a selection or prompts the user for some
// text to apply the tag to
function insertcode(tag, desc)
{
    // our textfield
    var textarea = document.getElementById("The_TextArea");

    // our open tag
    var open = "[" + tag + ">";

    // our close tag
    var close = "[/" + tag + ">";

    if(!textarea.setSelectionRange)
    {
        var selected = document.selection.createRange().text;
        if(selected.length <= 0)
        {
            // no text was selected so prompt the user for some text
            textarea.value += open + prompt("Please enter the text you'd like to " + desc, "") + close;
        }
        else
        {
            // put the code around the selected text
            document.selection.createRange().text = open + selected + close;
        }

    }
    else
    {
        // the text before the selection
        var pretext = textarea.value.substring(0, textarea.selectionStart);
       
        // the selected text with tags before and after
        var codetext = open + textarea.value.substring(textarea.selectionStart, textarea.selectionEnd) + close;

        // the text after the selection
        var posttext = textarea.value.substring(textarea.selectionEnd, textarea.value.length);
       
        // check if there was a selection
        if(codetext == open + close)
        {
            //prompt the user
            codetext = open + prompt("Please enter the text you'd like to " + desc, "") + close;
        }

        // update the text field
        textarea.value = pretext + codetext + posttext;
    }

    // set the focus on the text field
    textarea.focus();
}

// inserts an image by prompting the user for the url
function insertimage()
{
    // our textfield
    var textarea = document.getElementById("The_TextArea");

    // our image
    var image = "<img src='" + prompt("Please enter the url", "http://") + "' alt='' />";

    if(!textarea.setSelectionRange)
    {
        // get selected text
        var selected = document.selection.createRange().text;

        if(selected.length <= 0)
        {
            // no text was selected so add the image to the end
            textarea.value += image;
        }
        else
        {
            // replace the selection with the image
            document.selection.createRange().text = image;
        }
    }
    else
    {
        // the text before the selection
        var pretext = textarea.value.substring(0, textarea.selectionStart);

        // the text after the selection
        var posttext = textarea.value.substring(textarea.selectionEnd, textarea.value.length);

        // update the text field
        textarea.value = pretext + image + posttext;
    }

    // set the focus on the text field
    textarea.focus();
}

// inserts a link by prompting the user for a url
function insertlink()
{
    // our textfield
    var textarea = document.getElementById("The_TextArea");

    // our link
    var url = prompt("Please enter the url", "http://");
    var link = "[url=http://" + url + ">" + url + "[/url]";

    if(!textarea.setSelectionRange)
    {
        // get selected text
        var selected = document.selection.createRange().text;

        if(selected.length <= 0)
        {
            // no text was selected so add the link to the end
            textarea.value += link;
        }
        else
        {
            // replace the selection with the link
            document.selection.createRange().text = "[url=http://" + url + ">" + selected + "[/url]";
        }
    }
    else
    {
        // the text before the selection
        var pretext = textarea.value.substring(0, textarea.selectionStart);

        // the text after the selection
        var posttext = textarea.value.substring(textarea.selectionEnd, textarea.value.length);

        // update the text field
        textarea.value = pretext + "[url=http://" + url + ">" + selected + "[/url]" + posttext;
    }

    // set the focus on the text field
    textarea.focus();
}
</script>


[color=red]Html code:[/color]

<input type="button" onclick="insertcode('B', 'bold');" value="B" title="Bold text" />
<input type="button" onclick="insertcode('I', 'make italic');" value="I" title="Italic text" />
<input type="button" onclick="insertcode('U', 'underline');" value="U" title="Underlined text" />
<input type="button" onclick="insertcode('QUOTE', 'quote');" value="Quote" title="Insert a quote" />
<input type="button" onclick="insertimage();" value="Image" title="Inset an image" />
<input type="button" onclick="insertlink();" value="Link" title="Insert a link" /><br />
<textarea name="The_Textarea" cols="50" rows="20" id="The_Textarea"></textarea>

[Heero]

I think you are misreading my post....