vBulletin LTS

[HOW TO] Add WYSIWYG Editor to Your Modifications

by Mythotical 23 Nov 2009

I do this as a free service, I am a student however and all donations are welcome. You can click on the Paypal icon to make a donation: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=S45W6HN9D3FGU

I will add instructions for pulling data when editing a file.

This article was done for vB 3.5 and later, I now bring you the article for vB 4.0 in regards to the editor in modifications.

Working Versions: Currently 4.1.10
Testing Versions: NONE

This tutorial will provide you the proper method for including the WYSIWYG editor in your modifications. I have tested this and it works so following this tutorial will provide a working editor. You are welcome to tweak it to your liking so that you get different output's or vice versa.

Lets begin.

Step 1. Make sure you have already added the row to your database table. The new row to add is:

PHP Code:


`message` varchar(255)

You can alter that to be messagearea, message, description, etc and it will work just the same.

Step 2. Open your template containing your form.
Step 3. Install the provided plugin xml file.
Step 3. Add the following lines of code.

Now add this in place of your opening form tag (Remember to change your action to your correct file):

HTML Code:

<form class="vbform block" action="file.php" method="post" name="vbform" onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(0, 0)">
    <div class="blockbody formcontrols">
        <div class="section">
            {vb:raw messagearea}
        </div>
    </div>
    <div class="blockfoot actionbuttons">
        <div class="group">
                <input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
                <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                <input type="hidden" name="do" value="postsomething" />
                <input type="submit" class="button" name="sbutton" id="{vb:raw editorid}_save" value="{vb:rawphrase submit}" accesskey="s" tabindex="1" />
                <input type="submit" class="button" name="preview" value="{vb:rawphrase preview_post}" accesskey="r" tabindex="1" />
        </div>
    </div>
</form>

Step 4. Add the following to your php file.

Open the file you wish to add your editor to (Make sure you have this code in the area where your template containing the editor is to be called):

PHP Code:


require_once(DIR . '/includes/functions_editor.php');
require_once(DIR . '/includes/functions_bigthree.php');

$editorid = construct_edit_toolbar('',1,'signature',1,1,($vbulletin->userinfo['userid']));

Then edit your template register and add the following:

PHP Code:


$templater->register('editorid', $editorid);
$templater->register('messagearea', $messagearea);

Add this line to your php file after you define special templates, global templates, etc:

PHP Code:


define('GET_EDIT_TEMPLATES', true);

Add these to your specialtemplates:

PHP Code:


$specialtemplates = array('smiliecache','bbcodecache');

Step 5. Save and close your file, upload and test. Make sure you saved your template as well.

This is a short article/tutorial and I hope many find it useful. Even though I did not come up with the code or discover the code, I am happy to help others out as I was helped out.

Preview provided at attachments.

Attached Thumbnails

Attached Files

vbulletin-plugins.xml (414 Bytes, 125 views)

vblts.ru supports vBulletin®, 2022-2024