WYSIWYG New thread/Reply

This is sorta neat... everything, instead of having the old-school type-in text box for replies and new threads, you have a Frontpage-like visual editor for your replies!

Supports colors, and everything! Here's how to install...

1. Back up your newreply and newthread templates, just in case. (I'm not responsible if you screw up and blow up your house.)

2. Instead of me giving you pieces of the templates to modify, since there are huge modifications, I'll just give you the templates themselves. You usually won't have to change anything, unless you installed some hacks that modify the newreply or newthread templates.

3. When people are posting/replying, be sure to let them know that before they can submit the form, they have to press the 'save' button that's on the toolbar.

4. Upload the images attached to forums/images/toolbar directory.

5. Enjoy!:bunny:

New version available here.

If I left out anything...let me know. ^_^

[Velocd]

as requested...

Add-On: Allow users to choose which posting engine to use via UserCp Options
A nice addition by Velocd

This will help users whose browser does not support the WYSIWYG editor, such as Mozilla 1.0 (stated by GameCrash earlier in this thread). Also, everything is about user preference so its good to give your members an option.

Very easy to install, shouldn't take long at all. Although, if you currently have the WYSIWYG editor installed you will have to do a few things on your own.


--------------------------------------------------------------
Install Procedure:
--------------------------------------------------------------

1. Run the following query in PhpMyAdmin:

alter table user
add enablewysiwyg smallint(5) UNSIGNED not null default '0';

2. In member.php, find the following:

PHP Code:

    $showsignaturesnotchecked="checked";
} 


Directly below it add:

PHP Code:

if ($bbuserinfo[enablewysiwyg]) {
     $enablewysiwygchecked="checked";
     $enablewysiwygnotchecked="";
  } else {
     $enablewysiwygchecked="";
     $enablewysiwygnotchecked="checked";
  } 


Now find:

PHP Code:

$options=iif($showsignatures=="yes",1,0); 


Below it add:

PHP Code:

$enablewysiwyg=iif($enablewysiwyg=="yes",1,0); 


Last but no least, find:

PHP Code:

$DB_site->query("UPDATE user
                     SET ".$updatestyles."adminemail='$adminemail',enablewysiwyg='$enablewysiwyg',allowrate='$allowrate',
                        showemail='$showemail',invisible='$invisible',cookieuser='$cookieuser',
                        maxposts='".addslashes($umaxposts)."',daysprune='".addslashes($prunedays)."',
                        timezoneoffset='".addslashes($timezoneoffset)."',emailnotification='$emailnotification',
                        startofweek='".addslashes($startofweek)."',options='$options',receivepm='$receivepm',
                        emailonpm='$emailonpm',pmpopup='$pmpopup',usergroupid='$bbuserinfo[usergroupid]',
                        nosessionhash='$nosessionhash'
                   WHERE userid='$bbuserinfo[userid]'"); 


And see in that code on the 2nd line where I have:

PHP Code:

enablewysiwyg='$enablewysiwyg', 


You wanna add that too
After your finish that, save member.php


3. Open newthread.php, and find the following:

PHP Code:

eval("dooutput(\"".gettemplate("newthread")."\");"); 


Replace it with this code:

PHP Code:

$threadengine = $DB_site->query_first("SELECT enablewysiwyg FROM user WHERE userid='$bbuserinfo[userid]'");

  if($threadengine[enablewysiwyg]){ eval("dooutput(\"".gettemplate("newthread_wysiwyg")."\");");

  } else { eval("dooutput(\"".gettemplate("newthread")."\");"); } 


4. Open newreply.php, and find the following:

PHP Code:

eval("dooutput(\"".gettemplate("newreply")."\");"); 


Replace it with this code:

PHP Code:

$replyengine = $DB_site->query_first("SELECT enablewysiwyg FROM user WHERE userid='$bbuserinfo[userid]'");

  if($replyengine[enablewysiwyg] == 1) { eval("dooutput(\"".gettemplate("newreply_wysiwyg")."\");");

  } else { eval("dooutput(\"".gettemplate("newreply")."\");"); } 


5. The same thing still needs to be done with the private.php and editpost.php, only problem is that their templates have not yet been implemented with the WYSIWYG system, so we will have to wait awhile...

6. Go into your admin/functions.php, find the following:

PHP Code:

global $vbcodemode,$vbcode_smilies; 


Replace it with:

PHP Code:

global $DB_site,$vbcodemode,$vbcode_smilies; 


Now find:

PHP Code:

eval ("\$vbcode_buttons = \"".gettemplate("vbcode_buttons")."\";"); 


Place above it on a new line the following:

PHP Code:

$vbcodetype = $DB_site->query_first("SELECT enablewysiwyg FROM user WHERE userid='$bbuserinfo[userid]'");
    if($vbcodetype[enablewysiwyg]) { $vbcodetype = "vbcode2.js"; } else { $vbcodetype = "vbcode.js"; } 


7.. Now to create new templates! In your Admin Cp, create the following template with its content:

newreply_wysiwyg:
newreply.txt that was provided in the hack zip needs to be in this template.

newthread_wysiwyg:
newthread.txt that was provided in the hack zip needs to be in this template.


8. Now you need to revert the templates, or change back to what you originally had, newthread and newreply.


9. Now to modify a couple templates, and then we're finished. In vbcode_buttons find the following:

<script language="Javascript" src="vbcode.js"></script>

Replace it with:

<script language="Javascript" src="$vbcodetype"></script>

10. In the template modifyoptions, find the following:

<input type="radio" name="pmpopup" $pmpopupnotchecked value="no"> no
	</normalfont></td>
</tr>
<!-- *** -->

And just below it place:

<tr>
<td bgcolor="#1D6AA0" colspan="2"><normalfont color="#EEEEFF"><b>New Thread, Reply & Personal Messaging Engine</b></normalfont></td>
</tr>
<tr>
	<td bgcolor="#1C5780"><normalfont><b>Use the WYSIWYG enhanced HTML engine? *IS IN BETA*</b></normalfont><br>
	<smallfont>Selecting yes will enable the new WYSIWYG posting engine, which does not require the use of some VBcode tags and has a typing interface similar to that of Microsoft Word.  <br><b><u>Note:</u> May be incompatible with some internet browsers.</b><br><b><u>Note2:</u> To use such VBcodes as the [img] tag, you must first initialize <i>enhanced mode</i> on the posting screen.  Then simply type in the tags and close them as you would normally do.</b>
</smallfont></td>
	<td bgcolor="#1C5780"><normalfont>
		<input type="radio" name="enablewysiwyg" value="yes" $enablewysiwygchecked> yes
		<input type="radio" name="enablewysiwyg" value="no" $enablewysiwygnotchecked> no
	</normalfont></td>
</tr>

When the WYSIWYG is out of beta, meaning fixed of bugs, you should probably reomve the *IS IN BETA* from the chunk above.

--------------------------------------------------------------

Well thats it! If I missed anything or there are problems be sure to let me know, but I'm fairly sure I got everything down.




UPDATE:

To reduce the ues of extra queries, its always good to add the custom templates to the $templatesused = "" list.

1. In newthread.php, find:

PHP Code:

$templatesused = "newpost_postpreview, 


Replace it with this:

PHP Code:

$templatesused = "newpost_postpreview, newthread_wysiwyg, 


2. In newreply.php, find:

PHP Code:

$templatesused = "quotereply, 


Replace it with this:

PHP Code:

$templatesused = "quotereply, newreply_wysiwyg, 


[eiSecure]

whoohoo! We've finished the HTML -> BBCode conversion code!

I will test it out to see how it works, and, if velocd lets me, I'll release everything as a complete package. (With credit given, of course.)

:bunny:

[Velocd]

Sounds like an excellent idea ^_^

[eiSecure]

Velocd, just wondering...

...any chance you can make your addon autodetect if the user is using IE5.5 or above?

For example, if the user is using IE5.5, then WYSIWYG will automatically be default, but if the user is on Netscape/Mozilla, it will autodefault to regular mode, and not let them switch, because it won't be possible.

[Paul]

Originally posted by eiSecure
Everything is working, except for the HTML to BBCode conversion.

Hah. That's the biggest part. Allowing HTML is like leaving your car keys in the ignition, the doors unlocked, and installing a big flashing neon sign on the roof of your car that blinks "STEAL ME" in bright pink.

;D

[eiSecure]

It's all fixed now.

It has almost no bugs now, and the only problem is compatibility.

[Velocd]

Originally posted by eiSecure
Velocd, just wondering...

...any chance you can make your addon autodetect if the user is using IE5.5 or above?

For example, if the user is using IE5.5, then WYSIWYG will automatically be default, but if the user is on Netscape/Mozilla, it will autodefault to regular mode, and not let them switch, because it won't be possible.

I have no idea how to do that, sorry eiSecure..
I'm sure it requires some javascript which I don't have much knowledge in..

[Superman53142]

Originally posted by LoveShack


Hah. That's the biggest part. Allowing HTML is like leaving your car keys in the ignition, the doors unlocked, and installing a big flashing neon sign on the roof of your car that blinks "STEAL ME" in bright pink.

;D

It's done. We finished this afternoon. It will be officially released tomorrow. Don't ask me why

[Superman53142]

Originally posted by Velocd


I have no idea how to do that, sorry eiSecure..
I'm sure it requires some javascript which I don't have much knowledge in..

I'll take a look at it after I get a snack. I'm pretty sure PHP grabs all the user variables when the user requests a page. Should be in there somewhere.

[Admin]

Can I close this thread now that there's a new one?

Speak now or forever hold your peace.