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 7 of 10 « First 56 7 89 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
  #62  
Old 11-12-2010, 09:52 PM
Cadellin's Avatar
Cadellin Cadellin is offline
 
Join Date: Jan 2009
Posts: 160
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by bpr View Post
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
Thank you bpr - I tried using the aaaatest php example with Steve M's template and I got no joy. After using your fix however everything is working.

Does anyone have a "cleaner" solution for the long-term?
Reply With Quote
  #63  
Old 11-19-2010, 06:31 PM
jujubins's Avatar
jujubins jujubins is offline
 
Join Date: May 2007
Location: Rio de Janeiro - Brazil
Posts: 57
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
How to disable WYSIWYG advanced editor? I want to use only standart in my mod.

Because in Firefox and IE I cant send with my form.

Or, how I remove a button from tollbar?
Reply With Quote
  #64  
Old 12-16-2010, 03:59 PM
FCS-Webmaster FCS-Webmaster is offline
 
Join Date: Aug 2007
Posts: 64
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I od have a mysterious problem, maybe a handsome guy could lend me a helping hand.
I followed all the instructions down to the end and it works with one simple failure:

When I use the advanced WYSIWG a formated text is stored in my db as plain text.
Any ideas why bbcodes are ripped off?

kind regards
Reply With Quote
  #65  
Old 12-31-2010, 01:38 AM
RaidenDAWG2 RaidenDAWG2 is offline
 
Join Date: Mar 2005
Location: THE Ohio State University
Posts: 141
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I may have a solution to the WYSIWYG problem here.

Change:
PHP Code:
<form class="vbform block" action="file.php" method="post" name="vbform" onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(this.inputname.value, {vb:raw vboptions.postminchars})"> 
To

PHP Code:
<form class="vbform block" action="file.php" method="post" name="vbform" onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(0, {vb:raw vboptions.postminchars})" 
And that should take care of the issue. For the WYSIWYG editor to pass the message value to your processing script, it first has to transfer it from the iframe it resides in to the message field in the $_POST variable.
Reply With Quote
  #66  
Old 09-05-2011, 05:03 AM
iBaker's Avatar
iBaker iBaker is offline
 
Join Date: Oct 2006
Location: Melbourne, Australia
Posts: 152
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Does this need to be updated for the new editor or is there a newer How To elsewhere?
Reply With Quote
  #67  
Old 09-05-2011, 08:05 AM
Ziki's Avatar
Ziki Ziki is offline
 
Join Date: Nov 2005
Posts: 2,704
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by RaidenDAWG2 View Post
I may have a solution to the WYSIWYG problem here.

Change:
PHP Code:
<form class="vbform block" action="file.php" method="post" name="vbform" onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(this.inputname.value, {vb:raw vboptions.postminchars})"> 
To

PHP Code:
<form class="vbform block" action="file.php" method="post" name="vbform" onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(0, {vb:raw vboptions.postminchars})" 
And that should take care of the issue. For the WYSIWYG editor to pass the message value to your processing script, it first has to transfer it from the iframe it resides in to the message field in the $_POST variable.
Thank you, that worked!!
Reply With Quote
  #68  
Old 09-23-2011, 02:18 AM
Mythotical Mythotical is offline
 
Join Date: Jun 2004
Location: Booneville, AR, USA
Posts: 1,428
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
As I have returned to vBulletin I will be updating this article to work with any changes incurred from 4.0.x to 4.1.x
Reply With Quote
  #69  
Old 09-26-2011, 01:27 PM
sweeps78 sweeps78 is offline
 
Join Date: Sep 2006
Posts: 102
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hi Steve,

Do you have any updates on this? I can't seem to get this to work with 4.1.5.
Reply With Quote
  #70  
Old 09-26-2011, 03:36 PM
bananalive bananalive is offline
 
Join Date: Oct 2007
Location: UK
Posts: 2,802
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by sweeps78 View Post
Hi Steve,

Do you have any updates on this? I can't seem to get this to work with 4.1.5.

In your php near the beginning:

PHP Code:
define('GET_EDIT_TEMPLATES', true); 
In your php file in your main script, you'll need:

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

$editorid = construct_edit_toolbar(
        'blah lbah fsdkjksd',
        0,
        0,
        1,
        1,
        0,
        'fe'
    ); 
In your template <head>

HTML Code:
	<script type="text/javascript" src="clientscript/vbulletin-editor.js?v={vb:raw vboptions.simpleversion}"></script>
In your template <body>

HTML Code:
<form class="vbform block" action="yourpage.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>
Reply With Quote
Благодарность от:
sweeps78
  #71  
Old 09-26-2011, 04:14 PM
sweeps78 sweeps78 is offline
 
Join Date: Sep 2006
Posts: 102
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Wow! I so wasn't expecting such a quick reply. This worked, thanks!

Now I have to dig into what is the difference between what I was trying to use and what you posted here....

After I realized that the original work doesn't work on 4.1.5, I basically ripped apart newthread.php and newthread template from vb and came up with almost exactly what you posted. I probably left out a semi colon or something
Reply With Quote
Reply
Page 7 of 10 « First 56 7 89 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 09:22 PM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05279 seconds
  • Memory Usage 2,381KB
  • Queries Executed 28 (?)
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
  • (3)bbcode_html
  • (12)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
  • (6)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (2)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_postinfo_query
  • fetch_postinfo
  • 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