PHP Warning: Undefined array key "rating" in ..../includes/class_postbit.php(368) : eval()'d code on line 68
[HOW TO] Add WYSIWYG Editor to Your Modifications - vb.org Archive
Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
Reload this Page [HOW TO] Add WYSIWYG Editor to Your Modifications
Register FAQ Community Calendar Today's Posts Search

Reply
Page 1 of 10 1 23 Last »
 
Thread Tools
[HOW TO] Add WYSIWYG Editor to Your Modifications
Mythotical
Join Date: Jun 2004
Posts: 1,428

 

Booneville, AR, USA
Show Printable Version Email this Page Subscription
Mythotical Mythotical is offline 11-22-2009, 10:00 PM
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:

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 Images
File Type: jpg editor.jpg (20.4 KB, 0 views)
File Type: png file.png (3.5 KB, 0 views)
Attached Files
File Type: xml vbulletin-plugins.xml (414 Bytes, 123 views)
Reply With Quote
  #2  
Old 11-25-2009, 06:56 AM
RS_Jelle RS_Jelle is offline
 
Join Date: Jul 2005
Posts: 1,276
Благодарил(а): 0 раз(а)
Поблагодарили: 1 раз в 1 сообщении
Default
Instead of adding all these templates to globaltemplates, you could add this:

PHP Code:
define('GET_EDIT_TEMPLATES', true);
Even better, use action templates:
PHP Code:
define('GET_EDIT_TEMPLATES', 'action1,action2');
Reply With Quote
  #3  
Old 11-25-2009, 08:14 AM
zbahadir's Avatar
zbahadir zbahadir is offline
 
Join Date: Jun 2006
Location: TRABZON/TR
Posts: 132
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thanks.
Reply With Quote
  #4  
Old 11-25-2009, 03:27 PM
Mythotical Mythotical is offline
 
Join Date: Jun 2004
Location: Booneville, AR, USA
Posts: 1,428
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by RS_Jelle View Post
Instead of adding all these templates to globaltemplates, you could add this:

PHP Code:
define('GET_EDIT_TEMPLATES', true);
Even better, use action templates:
PHP Code:
define('GET_EDIT_TEMPLATES', 'action1,action2');
Thanks, I'll update the article to reflect your suggestion.

I should ask what that does since I have never seen that code before. I'm sure others will question as well.
Reply With Quote
  #5  
Old 11-25-2009, 07:35 PM
RS_Jelle RS_Jelle is offline
 
Join Date: Jul 2005
Posts: 1,276
Благодарил(а): 0 раз(а)
Поблагодарили: 1 раз в 1 сообщении
Default
Quote:
Originally Posted by Steve M View Post
Thanks, I'll update the article to reflect your suggestion.

I should ask what that does since I have never seen that code before. I'm sure others will question as well.
It just caches the editor templates, in an easier way

From /includes/class_bootstrap.php:
PHP Code:
        // if we are in a message editing page then get the editor templates
        $show['editor_css'] = false;
        if (defined('GET_EDIT_TEMPLATES'))
        {
            $_get_edit_templates = explode(',', GET_EDIT_TEMPLATES);
            if (GET_EDIT_TEMPLATES === true OR in_array($_REQUEST['do'], $_get_edit_templates))
            {
                $cache = array_merge($cache, array(
                    // message stuff 3.5
                    'editor_toolbar_on',
                    'editor_smilie',
                    // message area for wysiwyg / non wysiwyg
                    'editor_clientscript',
                    'editor_toolbar_off',
                    'editor_smilie_category',
                    'editor_smilie_row',
                    'editor_toolbar_fontname',
                    'editor_toolbar_fontsize',
                    'editor_toolbar_colors',
                    // javascript menu builders
                    'editor_jsoptions_font',
                    'editor_jsoptions_size',
                    // smiliebox templates
                    'editor_smiliebox',
                    // needed for thread preview
                    'bbcode_code',
                    'bbcode_html',
                    'bbcode_php',
                    'bbcode_quote',
                    // misc often used
                    'newpost_threadmanage',
                    'newpost_disablesmiliesoption',
                    'newpost_preview',
                    'newpost_quote',
                    'posticonbit',
                    'posticons',
                    'newpost_usernamecode',
                    'newpost_errormessage',
                    'forumrules'
                ));

                $show['editor_css'] = true;
            }
        }
+ If you don't do it this way, this mod won't work (if it gets ported to vB4).
Reply With Quote
  #6  
Old 11-25-2009, 08:28 PM
Mythotical Mythotical is offline
 
Join Date: Jun 2004
Location: Booneville, AR, USA
Posts: 1,428
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by RS_Jelle View Post
It just caches the editor templates, in an easier way

From /includes/class_bootstrap.php:
PHP Code:
        // if we are in a message editing page then get the editor templates
        $show['editor_css'] = false;
        if (defined('GET_EDIT_TEMPLATES'))
        {
            $_get_edit_templates = explode(',', GET_EDIT_TEMPLATES);
            if (GET_EDIT_TEMPLATES === true OR in_array($_REQUEST['do'], $_get_edit_templates))
            {
                $cache = array_merge($cache, array(
                    // message stuff 3.5
                    'editor_toolbar_on',
                    'editor_smilie',
                    // message area for wysiwyg / non wysiwyg
                    'editor_clientscript',
                    'editor_toolbar_off',
                    'editor_smilie_category',
                    'editor_smilie_row',
                    'editor_toolbar_fontname',
                    'editor_toolbar_fontsize',
                    'editor_toolbar_colors',
                    // javascript menu builders
                    'editor_jsoptions_font',
                    'editor_jsoptions_size',
                    // smiliebox templates
                    'editor_smiliebox',
                    // needed for thread preview
                    'bbcode_code',
                    'bbcode_html',
                    'bbcode_php',
                    'bbcode_quote',
                    // misc often used
                    'newpost_threadmanage',
                    'newpost_disablesmiliesoption',
                    'newpost_preview',
                    'newpost_quote',
                    'posticonbit',
                    'posticons',
                    'newpost_usernamecode',
                    'newpost_errormessage',
                    'forumrules'
                ));

                $show['editor_css'] = true;
            }
        }
+ If you don't do it this way, this mod won't work (if it gets ported to vB4).
Ah great info, thank you for clarifying, I have included it in the article as well. I plan to go change my ported mods to include that as well.
Reply With Quote
  #7  
Old 12-13-2009, 02:06 PM
MaryTheG(r)eek MaryTheG(r)eek is offline
 
Join Date: Sep 2006
Location: Greece
Posts: 1,340
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I've followed the instruction, editors works as it must works, but in all pages there is that dammit yellow triangle at browser's status bar with error:
vB_XHTML_Ready has not been definied
URI: http://www.microhellas.com/main/clie...tor.js?v=400b5


Maria
Reply With Quote
  #8  
Old 12-13-2009, 04:02 PM
Mythotical Mythotical is offline
 
Join Date: Jun 2004
Location: Booneville, AR, USA
Posts: 1,428
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Maria, can you show me the page that you get the yellow triangle? I don't get the triangle so I'm a bit concerned right now, oh yeah, what browser you viewing the page in?
Reply With Quote
  #9  
Old 12-13-2009, 04:18 PM
MaryTheG(r)eek MaryTheG(r)eek is offline
 
Join Date: Sep 2006
Location: Greece
Posts: 1,340
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Steve M View Post
Maria, can you show me the page that you get the yellow triangle? I don't get the triangle so I'm a bit concerned right now, oh yeah, what browser you viewing the page in?
Sure. http://www.microhellas.com/main/support.php

Thank you so much. By the way. IE8

Maria
Reply With Quote
  #10  
Old 12-13-2009, 04:21 PM
Mythotical Mythotical is offline
 
Join Date: Jun 2004
Location: Booneville, AR, USA
Posts: 1,428
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hmmmm, I opened it in IE8 but I get no error report. Let me check a few things and I'll post back.

Your welcome.
Reply With Quote
Reply
Page 1 of 10 1 23 Last »

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 05:05 AM.

Contact Us - Archive - Privacy Statement - Top

Powered by vBulletin® Version 3.9.0
Copyright ©2000 - 2017, vBulletin Solutions Inc.