BBcode editor

Soul_Stealler · 14 Август 2006

Нещо не мога да подкарам един урок за BBcode editor... Ето линка:
1ва част
2ра част

Ето какво правя:

text.html

Код:

<html><head>
<title>Editor</title>
<script src="editor.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" />


</head><body>
<form action="bbcode.php" method="post" name="editform" onsubmit="return checkForm(this)">
<table id="editform">
<tr>
        <td colspan="2" id="header">Post a new message</td>
</tr>

<tr id="subject">
        <td>Subject:</td>
        <td><input type="text" name="subject" size="50" class="form_elements_text"/></td>
</tr>
<tr>
        <td rowspan="2" id="smilies">Smilies
                <a href="javascript:smilie(':)')">
                        <img src="smilies/yellow/smile.gif" alt="smile" title="smile" /></a>
                <a href="javascript:smilie(':D')">
                        <img src="smilies/yellow/biggrin.gif" alt="big grin" title="big grin"/></a>
                <a href="javascript:smilie(':p')">
                        <img src="smilies/yellow/razz.gif" alt="razz" title="razz" /></a></td>
        <td>
                <input type="button" class="button" value="bold" name="bold" onclick="javascript:tag('b', '[b]', 'bold*', '[/b]', 'bold', 'bold');" onMouseOver="helpline('bold')" />
                <input type="button" class="button" value="italic" name="italic" onclick="javascript:tag('i', '[i]', 'italic*', '[/i]', 'italic', 'italic');" onMouseOver="helpline('italic')" />
                <input type="button" class="button" value="underline" name="underline" onclick="javascript:tag('u', '[u]', 'underline*', '[/u]', 'underline', 'underline');" onMouseOver="helpline('underline')" />
                <input type="button" class="button" value="quote" name="quote" onclick="javascript:tag('q', '[quote]', 'quote*', '[/quote]', 'quote', 'quote');" onMouseOver="helpline('quote')" />
                <input type="button" class="button" value="code" name="code" onclick="javascript:tag('c', '[code]', 'code*', '

', 'code', 'code');" onMouseOver="helpline('code')" />
<input type="button" class="button" value="url" name="url" onclick="javascript:tag('url', '', 'url*', '', 'url', 'url');" onMouseOver="helpline('url')" />
<input type="button" class="button" value="img" name="img" onclick="javascript:tag('img', '

', 'img', 'img');" onMouseOver="helpline('img')" />
<br />
Font size: <select name="fontsize" onChange="font('.value + ']', ''); this.selectedIndex=2;" onMouseOver="helpline('fontsize')" class="form_elements_dropdown">

<option value="50%" >Tiny</option>
<option value="75%" >Small</option>
<option value="100%" selected >Normal</option>
<option value="150%" >Large</option>
<option value="200%" >Huge</option>
</select>

Font color: <select name="fontcolor" onChange="font('[color=' + this.form.fontcolor.options[this.form.fontcolor.selectedIndex].value + ']', '[/color]'); this.selectedIndex=0;" onMouseOver="helpline('fontcolor')" class="form_elements_dropdown" >
<option value="black" style="color:black">Black</option>
<option value="silver" style="color:silver">Silver</option>
<option value="gray" style="color:gray">Gray</option>
<option value="maroon" style="color:maroon">Maroon</option>
<option value="red" style="color:red">Red</option> <option value="purple" style="color

urple">Purple</option>
<option value="fuchsia" style="color:fuchsia">Fuchsia</option>
<option value="navy" style="color:navy">Navy</option>
<option value="blue" style="color:blue">Blue</option>
<option value="aqua" style="color:aqua">Aqua</option>
<option value="teal" style="color:teal">Teal</option>
<option value="lime" style="color:lime">Lime</option>
<option value="green" style="color:green">Green</option>
<option value="olive" style="color

live">Olive</option>
<option value="yellow" style="color:yellow">Yellow</option>
<option value="white" style="color:white">White</option> </select>

<br />

<input type="text" name="helpbox" size="75" class="helpbox" readonly="readonly"/>
</td>
</tr>
<tr>
<td>
Post:<br />
<textarea rows="10" cols="50" name="post" class="form_elements_text"></textarea>
</td>
</tr>
<tr>

<td colspan="2" id="post">
<input type="submit" name="Post" value="Post" class="button" />
<input type="submit" name="preview" value="Preview" class="button"/>
<input type="reset" value="Start over" class="button" onclick="javascript:confirm_reset();"/>
</td>
</tr>
</table>
</form>

</body></html>

[/code]

style.css

Код:

/*Formatting for the buttons*/

.button {
        background-color : #D7D7D7;
        color : #000000;
        font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
        margin-bottom:3px;
        margin-left:1px; margin-right:1px;
        margin-top:2px
}
/*Blends the helpbox into the background of the page*/
.helpbox {border-style:none;
                background-color:#CCC;
                margin:5px;
}

/*Sets the properties of the editform table cells*/
table#editform {border-width:1px;
                border-style:solid;
                background-color:#CCC;
                width:400px;
}

table#editform > tr,td {border-width:1px;
                border-style:solid;
}

td#header {border-style:none;
                text-align:center;
}

td#smilies {text-align:center;
                vertical-align:top;
                padding: 10px;
}

td#post {text-align:center;
}

/*Background color for the subject line and post area*/
.form_elements_text {background-color:#D7D7D7
}

/*Background color for the dropdown menus*/
.form_elements_dropdown {background-color:#D7D7D7
}

img {border-style:none}

editor.js

Код:

//Variables for controlling opening and closing tags (function tag)

var b = 2;
var i = 2;
var u = 2;
var q = 2;
var c = 2;
var url = 2;
var img = 2;

//Function for creating non-font tags

function tag(v, tagadd, newbut, tagclose, oldbut, name) {
    if (eval(v)%2 == 0) {
        eval("window.document.editform."+name+".value = newbut;");
        var post = window.document.editform.post.value;
        window.document.editform.post.value = post + tagadd;
        window.document.editform.post.focus();
    } else {
        eval("window.document.editform."+name+".value = oldbut;");
        var post = window.document.editform.post.value;
        window.document.editform.post.value = post + tagclose;
        window.document.editform.post.focus();
    }
    eval(v+"++;");
}
//Function for adding font color and size tags

function font(bbopen, bbclose) {
        var post = document.editform.post;
        post.value += bbopen + bbclose;
        post.focus();
        return;
}
//Function for adding smilies

function smilie (smilie) {
        var post = document.editform.post;
        post.value += smilie;
        post.focus();
        return;
}
//Helpbox messages
bold_help = "Bold text: [b]text[/b]";
italic_help = "Italic text: [i]text[/i]";
underline_help = "Underline text: [u]text[/u]";
quote_help = "Quote text: [quote]text[/quote] or [quote="name"]text[/quote]";
code_help = "Code display: [code]code

";
img_help = "Insert image:

";
url_help = "Insert URL: http://url or URL text";
fontcolor_help = "Font color: text Tip: you can also use color=#FF0000";
fontsize_help = "Font size: small text";

//Function for displaying help information

// Shows the help messages in the helpline window
function helpline(help) {
var helpbox = document.editform.helpbox;
helpbox.value = eval(help + "_help");
}
//Function to confirm reset

function confirm_reset () {
if(confirm("If you continue you will loose everything you have entered so far. \n \n" +
"Click OK to proceed and start again. \n \n Alternatively click cancel to continue " +
"working on your post.")) {
return true;
}
else {
return false;
}
}
//Check the form submission for errors

function checkForm() {
var subject = document.editform.subject;
var post = document.editform.post;

//Check to make sure post lengths are sensible

if (subject.value.length < 2 && post.value.length < 2) {
alert("This is a short post!" + " \n \n " +
"We require that each post (and subject) \n" +
"be at least 2 characters long. \n \n" +
"Go back and try again.");
return false;
}
else { if (subject.value.length < 2) {
alert("We require that the subject \n" +
"be at least 2 characters long. \n \n" +
"Go back and try again.");
return false;
}
else { if (post.value.length < 2) {
alert("We require that each post \n" +
"be at least 2 characters long. \n \n" +
"Go back and try again.");
return false;
}
else {
return true;
}
}
}
}
[/code]

bbcode.php

Код:

<?php
function output_post ($post) {
//Make safe any html
$post_no_html = htmlspecialchars($post);

//Make sure there is no whitespace at the end of the message
//It's conceivable that the user will start their message with whitespace
$post_abridged = chop($post_no_html);
//Callback function for preg_replace_callback below
        function convert_for_html ($matches) {
                $regex[0] = "[";
                $regex[1] = "]";
                $replace[0] = "[";
                $replace[1] = "]";
                ksort($regex);
                ksort($replace);
                $treated = str_replace($regex, $replace, $matches[1]);
                $output = '<table class="code"><tr><td>Code:</td></tr><tr><td class="code_box">' . $treated . '</td></tr></table>';

                return $output;
        }

        //Convert code tags
        $code_treated = preg_replace_callback(
                        "/\[code\](.+?)\[\/code\]/s",
                   "convert_for_html",
                   $post_abridged);
//Arrays for the bbCode replacements
        $bbcode_regex = array(0 => '/\[b\](.+?)\[\/b\]/s',
                                                1 => '/\[i\](.+?)\[\/i\]/s',
                                                2 => '/\[u\](.+?)\[\/u\]/s',
                                                3 => '/\[quote\](.+?)\[\/quote\]/s',
                                                4 => '/\[quote\=(.+?)](.+?)\[\/quote\]/s',
                                                5 => '/\[url\](.+?)\[\/url\]/s',
                                                6 => '/\[url\=(.+?)\](.+?)\[\/url\]/s',
                                                7 => '/\[img\](.+?)\[\/img\]/s',
                                                8 => '/\[color\=(.+?)\](.+?)\[\/color\]/s',
                                                9 => '/\[size\=(.+?)\](.+?)\[\/size\]/s');

        $bbcode_replace = array(0 => '<b>$1</b>',
                                                1 => '<i>$1</i>',
                                                2 => '<u>$1</u>',
                                                3 => '<table class="quote"><tr><td>Quote:</td></tr><tr><td class="quote_box">$1</td></tr></table>',
                                                4 => '<table class="quote"><tr><td>$1 said:</td></tr><tr><td class="quote_box">$2</td></tr></table>',
                                                5 => '<a href="$1">$1</a>',
                                                6 => '<a href="$1">$2</a>',
                                                7 => '<img src="$1" alt="User submitted image" title="User submitted image"/>',
                                                8 => '<span style="color:$1">$2</span>',
                                                9 => '<span style="font-size:$1">$2</span>');

        ksort($bbcode_regex);
        ksort($bbcode_replace);

        //preg_replace to convert all remaining bbCode tags
        $post_bbcode_treated = preg_replace($bbcode_regex, $bbcode_replace, $code_treated);
//Convert new lines to <br />
        $post_with_br = nl2br($post_bbcode_treated);


        echo $post_with_br;
};

?>

_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-

От всичкото това което изписах ви моля да погледнете bbcode.php, защото до колкото виждам - другото работи... само че bbcode.php - не и не мога да намеря грешката ...
...

Soul_Stealler · 15 Август 2006

Оправих се... делнах 1вия function и сложих $post = $_POST['post'];

Admin · 15 Август 2006

Дай някакво демо!

BBcode editor

Soul_Stealler

Registered

Soul_Stealler

Registered

Admin

Registered