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
FAQ Members List Calendar Search Today's Posts Mark Forums Read

Reply
Page 6 of 10 « First 45 6 78 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
  #52  
Old 05-03-2010, 01:43 PM
bananalive bananalive is offline
 
Join Date: Oct 2007
Location: UK
Posts: 2,802
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Jaxel View Post
The multipart/form-data encoding type shouldn't be required, as I'm not supporting attachments in this form. However, i added both that and the class just to test it out, and neither made a difference (except that the class made the style look ugly, which is why I removed it in the first place).

Buttons still not working.
For Quick Reply to work you need to include the following in the <head>
Code:
<script type="text/javascript" src="clientscript/vbulletin-editor.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript" src="clientscript/vbulletin_textedit.js?v={vb:raw vboptions.simpleversion}"></script>
The first is needed for all vB Editors the second javascript file is only needed for quick reply vB Editors.
Reply With Quote
  #53  
Old 05-04-2010, 04:42 PM
identitas identitas is offline
 
Join Date: Oct 2008
Posts: 19
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Have som problems here. The code:

PHP Code:
if ($_REQUEST['do'] == 'pres')
{

$profile_res = $db->query_first("SELECT `field6` FROM `" . TABLE_PREFIX . "userfield` WHERE `userid` = ".$vbulletin->userinfo['userid']." LIMIT 1");

$profile_data = $profile_res['field6']; 

require_once(DIR . '/includes/functions_editor.php');
$editorid = construct_edit_toolbar($profile_data,1,'signature',1,1,($vbulletin->userinfo['userid']));

    $templater = vB_Template::create('profile_cp');
    
    $page_templater = vB_Template::create('profile_cp');
    $page_templater->register('messagearea', $messagearea);   
    $page_templater->register('editorid', $editorid);  

}

if ($_REQUEST['do'] == 'updatepres')
{

$profile_data = $_POST['message'];
 $db->query_write("
    UPDATE " . TABLE_PREFIX . "userfield
    SET field6 = '" . $profile_data . "'
    WHERE userid = " . $vbulletin->userinfo['userid'] . "");  
header('Location: profile.php?do=pres');

} 
When i submit, the data in $_POST['message']; is not the new data from en textarea, it is the old in $profile_data.

Any ideas?

EDIT: It's only in the WYSIWYG-mode that it refuses to save the new data. In the regular mode where the bb-code is visible unformatted it saves without problems.
Reply With Quote
  #54  
Old 05-07-2010, 03:59 AM
Jaxel Jaxel is offline
 
Join Date: Sep 2005
Posts: 1,160
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
What exactly does this part do?

Code:
onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(this.inputname.value, {vb:raw vboptions.postminchars})"
I ask because I want to use my own validation method, and you can't have TWO returns on an onsubmit. If I delete this part, it doesn't seem to have any adverse effects. So what does this do, and why is it needed?
Reply With Quote
  #55  
Old 05-07-2010, 04:58 AM
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 Jaxel View Post
What exactly does this part do?

Code:
onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(this.inputname.value, {vb:raw vboptions.postminchars})"
I ask because I want to use my own validation method, and you can't have TWO returns on an onsubmit. If I delete this part, it doesn't seem to have any adverse effects. So what does this do, and why is it needed?
You can't remove this if you want to save the data. If you want to add your own validation you can do it in 2 ways:
1.- Add at the end another return. eg
Code:
onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(this.inputname.value, {vb:raw vboptions.postminchars}); return validateForm_vbform()"
2.- This is the way that I'm using. Add your validation in submit button, using "onclick"
Code:
input type="submit" class="button" name="sbutton" value="{vb:var vbphrase.microdating_submit}" onclick="return validateForm_vbform()">
Maria
Reply With Quote
  #56  
Old 05-07-2010, 07:51 AM
Jaxel Jaxel is offline
 
Join Date: Sep 2005
Posts: 1,160
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Alright, thanks for the answer... although I did remove it, and it still saved the data without issue...

However, I have a different question... is there a reason why the editor controls would randomly disappear from the editor? No buttons or smilies are appearing, just the text box.
Reply With Quote
  #57  
Old 05-07-2010, 03:24 PM
bananalive bananalive is offline
 
Join Date: Oct 2007
Location: UK
Posts: 2,802
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by identitas View Post
EDIT: It's only in the WYSIWYG-mode that it refuses to save the new data. In the regular mode where the bb-code is visible unformatted it saves without problems.
To the <form> add onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(this.inputname.value, {vb:raw vboptions.postminchars})"

This javascript moves the wysiwyg data into textbox before it submits the form.
Reply With Quote
  #58  
Old 05-07-2010, 07:32 PM
Jaxel Jaxel is offline
 
Join Date: Sep 2005
Posts: 1,160
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Okay... next question... how do I DISABLE the wysiwyg option with a text box?

On my quick reply form, i want it to use the standard editor, with no WYSIWYG option.

--------------- Added [DATE]1273268438[/DATE] at [TIME]1273268438[/TIME] ---------------

I dont think onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(this.inputname.value, {vb:raw vboptions.postminchars})" works correctly. I have that code in my forms, and it still won't save the text when I am in WYSIWYG mode. It still saves perfectly fine in the standard editor.
Reply With Quote
  #59  
Old 05-12-2010, 02:26 PM
bpr bpr is offline
 
Join Date: Dec 2009
Location: London
Posts: 57
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
so guys, i figured out the problem, that you there is no message if you are in the wysiwyg mode! actually my soluiton is not that pretty, but it works fine.

PHP Code:
onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(0,0)" 
in that case i dont give the message to the vB_Editor to check the minimum word amount ... but hell i dont care - i just want a message :P
but that actually result in pure html which will arrive the db
Reply With Quote
  #60  
Old 05-25-2010, 04:29 AM
forumdude's Avatar
forumdude forumdude is offline
 
Join Date: Nov 2001
Posts: 50
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Steve,

Do you happen to have the instructions to do this on the 3.8 series archived?

Thanks.
Reply With Quote
  #61  
Old 06-15-2010, 10:26 PM
angedelamort angedelamort is offline
 
Join Date: Nov 2009
Posts: 17
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thanks for this great thread. It saved me a lot of time. But I was wondering if it was possible to remove the smilies panel easily only for my mod? Or maybe I should use the WYSIWYG from the quick reply?
If only the second option available, what's the variable name?

--- edit ---
Ok, after looking into the source code I found out:

Code:
$editorid = construct_edit_toolbar('',1,'signature',0,1,($vbulletin->userinfo['userid']));
the parameter in red is if we want to the smillies or not. Hope it's going to help someone else.
Reply With Quote
Reply
Page 6 of 10 « First 45 6 78 Last »

« Previous Thread | Next Thread »
Thread Tools

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 04:15 PM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05497 seconds
  • Memory Usage 2,366KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (6)bbcode_code
  • (1)bbcode_html
  • (7)bbcode_php
  • (3)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (11)post_thanks_box
  • (5)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (3)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete