Update query with nl2br and preg_replace, something funny happening

[Guber-X]

So what I have is a Rich Text editor I made myself it all works great except when I submit the form. My assumption is that it has to do with either nl2br or preg_replace. I have made my own bbcode converter thingy lol.

 

anyways... after click submit and it updates the database fine, but it will put in a lot of <div> elements in the string and I don't have it set to put in <div>'s anywhere except for justify text left,right,center or full. so heres the code thats involved with this.

 

index.php

<?php
    if (isset($_POST['submit'])) {
	include 'bbcode.php';
	$content = $_POST['hiddenpost'];
	$content = nl2br($content);
	$content = preg_replace($pattern, $replace, $content);
				
	mysqli_query($con, "UPDATE news SET content='$content' WHERE id='1'") or die("Update Error: ".mysqli_error($con));
	echo 'Page has been Updated. Thank You <br /><br />'.$content;  // the $content is just there for testing purposes
    }
    $result = mysqli_query($con,"SELECT * FROM news")
	or die('Result error: '. mysqli_error($con));
    while($row = mysqli_fetch_array($result))
        {
	    extract($row);
	    $date = date('D M j, Y',strtotime($date));
?>
    <div class="c_header"><div id="pad_content"><input name="header" value="<?php echo $header; ?>" /></div></div>
    <div class="c_content"><div id="pad_content">
    <div class='gre-toolbar' id='toolbar-gre'>
        <select id="size" onchange="select();">
            <option value="14">14px</option>
            <option value="16">16px</option>
	    <option value="18">18px</option>
    	    <option value="20">20px</option>
            <option value="22">22px</option>
            <option value="24">24px</option>
            <option value="26">26px</option>
        </select>
        <a href="#" class="bold" onclick="wrap('b'); return false;"><img src="gre/images/edit-bold.png" alt="bold" title="Bold"></a>
        <a href="#" class="italic" onclick="wrap('i'); return false;"><img src="gre/images/edit-italic.png" alt="italic" title="Italic"></a>
        <a href="#" class="underline" onclick="wrap('U'); return false;"><img src="gre/images/edit-underline.png" alt="underline" title="Underline"></a>
        <a href="#" class="strikeThrough" onclick="wrap('s'); return false;"><img src="gre/images/edit-strikeThrough.png" alt="strikeThrough" title="Strikethrough"></a>
        <a href="#" class="superscript" onclick="wrap('sup'); return false;"><img src="gre/images/edit-superscript.png" alt="superscript" title="Superscript"></a>
        <a href="#" class="subscript" onclick="wrap('sub'); return false;"><img src="gre/images/edit-subscript.png" alt="subscript" title="Subscript"></a>
        <a href="#" class="justifyLeft" onclick="justify('justify=left'); return false;"><img src="gre/images/edit-justify-left.png" alt="justifyLeft" title="Justify Left"></a>
        <a href="#" class="justifyCenter" onclick="justify('justify=center'); return false;"><img src="gre/images/edit-justify-center.png" alt="justifyCenter" title="Justify Center"></a>
        <a href="#" class="justifyRight" onclick="justify('justify=right'); return false;"><img src="gre/images/edit-justify-right.png" alt="justifyRight" title="Justify Right"></a>
        <a href="#" class="justifyFull" onclick="justify('justify=full'); return false;"><img src="gre/images/edit-justify-full.png" alt="justifyFull" title="Justify Full"></a>
        <a href="#" class="insertHorizontalRule" onclick="hr('hr'); return false;"><img src="gre/images/edit-hr.png" alt="insertHorizontalRule" title="Insert Horizontal Rule"></a>
        <a href="#" class="link" onclick="wrap('url'); return false;"><img src="gre/images/edit-link.png" alt="link" title="Insert URL (Link)"></a>
        <a href="#" class="upload" onclick="javascript:popup('picupload.php', '500', '300'); return false;"><img src="gre/images/edit-upload.png" alt="upload" title="Picture Upload"></a>
	<div class="admin_post" name="admin_post" id="admin_post" contenteditable="true"><?php echo $content; ?></div>
        <form method="post" id="newpost" name="newspost">
            <textarea name="hiddenpost" id="hiddenpost" hidden="true"></textarea><br />
            <center><input type="submit" id="submit" name="submit" value="Send"></center>
        </form>
        <script>
	    $("#submit").click(function() {
	        $("#hiddenpost").val($("#admin_post").html());
	    });
	</script>
    </div>
</div></div>
<div class="c_date"><div id="pad_content"><?php echo $date; ?></div></div>
<?php
    }
?>

bbcode.php

<?php
// convert [url=URL]link_title[/url]
$pattern[] = '/\[url=(.*?)\](.*?)\[\/url\]/i';
$replace[] = '<a href="$1" target="_blank">$2</a>';

// convert [url]url_link[/url]
$pattern[] = '/\[url\](.*?)\[\/url\]/i';
$replace[] = '<a href="$1" target="_blank">$1</a>';

// convert [img=image_link]
$pattern[] = '/\[img\](.*?)\[\/img\]/i';
$replace[] = '<img src="files/thumb/$1">';

// convert [b]text[/b]
$pattern[] = '/\[b\](.*?)\[\/b\]/i';
$replace[] = '<b>$1</b>';

// convert [i]text[/i]
$pattern[] = '/\[i\](.*?)\[\/i\]/i';
$replace[] = '<i>$1</i>';

// convert [size=]font size[/size]
$pattern[] = '/\[size\=(.*?)\](.*?)\[\/size\]/i';
$replace[] = '<span style="font-size: $1px;">$2</span>';

// convert [U]text[/U]
$pattern[] = '/\[U\](.*?)\[\/U\]/i';
$replace[] = '<u>$1</u>';

// convert [s]text[/s]
$pattern[] = '/\[s\](.*?)\[\/s\]/i';
$replace[] = '<strike>$1</strike>';

// convert [sup]text[/sup]
$pattern[] = '/\[sup\](.*?)\[\/sup\]/i';
$replace[] = '<sup>$1</sup>';

// convert [sub]text[/sub]
$pattern[] = '/\[sub\](.*?)\[\/sub\]/i';
$replace[] = '<sub>$1</sub>';

// convert [justify=]text[/justify]
$pattern[] = '/\[justify=(.*?)\](.*?)\[\/justify\]/i';
$replace[] = '<div style="text-align: $1; min-width: 100%;">$2</div>';

// convert [hr]
$pattern[] = '/\[hr\]/i';
$replace[] = '<hr>';
?>

[jcbones]

I would suggest to convert the bbcode on the display, instead of the insertion.  This way you could return the bbcode back to the user for editing.

[Guber-X]

yes that could work too, but im still wondering where all these magical <div>'s are coming from lol

[Barand]

Going through your code and debugging it is your responsibility unless you want to hire a consultant

 

edit : lol

Edited September 15, 2013 by Barand

[jcbones]

I would try adding one bbcode at a time, until the divisions started showing up.  I think you will find it a nesting problem, but I cannot spot it right off hand.

[Guber-X]

I would try adding one bbcode at a time, until the divisions started showing up.  I think you will find it a nesting problem, but I cannot spot it right off hand.

 

I actually removed my preg_replace for the bbcode and it still gives me these magical divs haha, now to look farther in what the heck is happening.. grrr

 

Going through your code and debugging it is your responsibility unless you want to hire a consultant

 

edit : lol

lol, well I was just hoping it was just a minor thing i missed, but apperently its not. how could this be debugged when its working, just adding divs on every new line... like it will wrap a <br> in a div haha

[Guber-X]

im almost thinking its due to jquery and the editable div.... 

[mac_gyver]

have you even pined down at what point the data contains the <div> tags? is in present in the $_POST'ed data, in the query statement, when you retrieve and display the data?

[mac_gyver]

your symptom rang a bell. see the following thread - http://forums.phpfreaks.com/topic/280894-jquery-ajax-and-php-help/?hl=%2Bjquery&do=findComment&comment=1443825

[Guber-X]

have you even pined down at what point the data contains the <div> tags? is in present in the $_POST'ed data, in the query statement, when you retrieve and display the data?

it is in the $_POST data, which is sent to the mysql db and shows the <div>'s in the database. using textarea instead of <div editable="true"> seems to not have the magical divs when submited but then my custom bbcode buttons dont send to the textarea... 

 

im going to do some more research on sending content from div to hidden textarea without jquery and see if it is jquery that is messing my code up. ive downloaded jquery 1.10.2 uncompressed to see if there was some stuff in there that is creating divs... which there seems to be a few in there about it. but im not the best with jquery thats why i dont use it to often.

[mac_gyver]

i made an additional post while you were writing your reply above. is your code using a jquery .html(); method to get the content for submission? if so, try the .text() method.

[Guber-X]

i made an additional post while you were writing your reply above. is your code using a jquery .html(); method to get the content for submission? if so, try the .text() method.

 

 

yes i saw your post, i changed the .html() to .text() and yes it got rid of the magical divs... awesome... its a step forward now and not backwards haha... now just to do some tweaking so it will keep new lines with <br> which should be simple enough

[Guber-X]

guess i was wrong for the easy part haha, im assuming when the content from the div when sent to the teaxtarea for submit, the .text() clears all html and keeps it as plain text right?

[mac_gyver]

the .text() method reads the visible text, the same as if you had clicked and dragged to select it and copied it to the clipboard in your browser.

[Guber-X]

i see...

 

so when using .text() if my content looks like this

 

 

Hi!

 

My Name is Guber

it will display like this

 

 

Hi!My Name is Guber

 

now for my rich text editor, it kinda defeats the purpose of being a "rich text editor" if you need to add html into the content before submitting.

[mac_gyver]

the content you are grabbing to submit would contain the bbcode tags, which are text.

 

what you appear to be having a problem with, in the example in the post above, are the new lines and getting them to render as <br> tags when you display the content.

[Guber-X]

yeah, i know the bbcode tags work, just the new lines dont. is there some kind of work around that could be done for this?

 

ps. i am very greatful for your help on this. i feel like i owe you something

Edited September 18, 2013 by Guber-X

[kicken]

nl2br

 

Assuming the text has the new lines still when posted to your script

[Guber-X]

nl2br

 

Assuming the text has the new lines still when posted to your script

that does not do anything as the jquery .text() eliminates any new lines. ive already tried. it would have to be in jquery to get my linebreaks back

[Guber-X]

okay, for the time being i am going to mark this topic as solved, due to this is no longer a "PHP" problem and after I do some more research I will make new post in the javascript section If i can't figure anything out

[Guber-X]

Just for everyone to see how I fixed my issue. it was due to jquery.

 

this section

<script>
	$("#submit").click(function() {
	  $("#hiddenpost").val($("#admin_post").html());
	});
</script>

i had to add a .replace after the .html so it looks like this and solved my issue

<script>
	$("#submit").click(function() {
	  $("#hiddenpost").val($("#admin_post").html().replace(/<div>/gi,'').replace(/<\/div>/gi,'<br>'));
        });
</script>

yes I went back to using .html(), the .text() was being difficult to work with and the above script solved my problem

 

Thanks to all who have helped me out, got me pointed in the right direction. thank you