Welcome to Our Community

Registration on our forums are now open for some days! Feel free to sign up today.

[HOW TO] Add WYSIWYG Editor to Your Modifications 2015-12-29

[HOW TO] Add WYSIWYG Editor to Your Modifications

  1. XenForo Rocks
    I do this as a free service, I am a student however and all donations are welcome. You can click on the Paypalicon to make a donation: btn_donate_LG.gif

    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:
    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):

    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):

    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:

    Code:
    $templater->register('editorid', $editorid);
    $templater->register('messagearea', $messagearea);  
    Add this line to your php file after you define special templates, global templates, etc:


    Code:
    define('GET_EDIT_TEMPLATES', true); 
    
    Add these to your specialtemplates:

    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.