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 5 of 10 « First 34 5 67 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
  #42  
Old 04-17-2010, 03:24 PM
MaryTheG(r)eek MaryTheG(r)eek is offline
 
Join Date: Sep 2006
Location: Greece
Posts: 1,340
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hello all,

The code to include qr editor is:

1.- PHP File
Code:
$editorid = construct_edit_toolbar('', false, 'nonforum', false, true, false, 'qr');
.......
$templater->register('editorid', $editorid);
$templater->register('messagearea', $messagearea);
2.- Template
Code:
<div class="wysiwyg_block">
<div class="blockbody formcontrols">
<div class="blockrow">
{vb:raw messagearea}
</div>
</div>
</div>
Works fine in 3 of my mods as you can see in the attached photo. Sorry, but as this article is not mine, I can't comes throught a full tutorial.

Maria
Attached Images
File Type: jpg vbqr_editor.jpg (56.4 KB, 0 views)
Reply With Quote
  #43  
Old 04-17-2010, 03:37 PM
Vaupell's Avatar
Vaupell Vaupell is offline
 
Join Date: Apr 2008
Location: Esbjerg, Denmark
Posts: 1,036
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by MicroHellas View Post
Hello all,

The code to include qr editor is:

1.- PHP File
Code:
$editorid = construct_edit_toolbar('', false, 'nonforum', false, true, false, 'qr');
.......
$templater->register('editorid', $editorid);
$templater->register('messagearea', $messagearea);
2.- Template
Code:
<div class="wysiwyg_block">
<div class="blockbody formcontrols">
<div class="blockrow">
{vb:raw messagearea}
</div>
</div>
</div>
Works fine in 3 of my mods as you can see in the attached photo. Sorry, but as this article is not mine, I can't comes throught a full tutorial.

Maria

thank you so much, this was excaktly what i needed

I can get this working just fine, but the full editor wont work for me
message returns blank..

But this is fine,, Tx Maria :up:
Reply With Quote
  #44  
Old 04-17-2010, 04:10 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 Vaupell View Post
but the full editor wont work for me
message returns blank..
Just use this:
Code:
$editorid = construct_edit_toolbar($profile['bodytext'],1,'',0,1,($vbulletin->userinfo['userid']));
Please note that the last part is to show an editor according to usergroup permissions (eg full WYSIWYG). The first part, is the field name. You can use '' to let it empty.

Maria
Reply With Quote
  #45  
Old 04-17-2010, 04:27 PM
Jaxel Jaxel is offline
 
Join Date: Sep 2005
Posts: 1,160
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I dont know man... I copy and pasted your code EXACTLY and I'm still getting the same error.
Code:
Uncaught ReferenceError: vB_Text_Editor is not defined
The text editor "works", it will accept input and what not, but the buttons on it (such as bold/italics) don't.
Reply With Quote
  #46  
Old 04-17-2010, 04:33 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 Jaxel View Post
I dont know man... I copy and pasted your code EXACTLY and I'm still getting the same error.
Code:
Uncaught ReferenceError: vB_Text_Editor is not defined
The text editor "works", it will accept input and what not, but the buttons on it (such as bold/italics) don't.
You can ignore that error, as it's vB bug, and appears only to IE8. As for the buttons, be sure to include in the <head> section:
Code:
  <script type="text/javascript" src="clientscript/vbulletin-editor.js?v={vb:raw vboptions.simpleversion}"></script>
  <link rel="stylesheet" type="text/css" href="{vb:var vbcsspath}editor.css" />
  <link rel="stylesheet" type="text/css" href="{vb:var vbcsspath}bbcode.css" />
--------------- Added [DATE]1271525701[/DATE] at [TIME]1271525701[/TIME] ---------------

Quote:
Originally Posted by Jaxel View Post
I dont know man...
By the way... I'm WOMAN.

Maria
Reply With Quote
  #47  
Old 04-17-2010, 04:42 PM
Jaxel Jaxel is offline
 
Join Date: Sep 2005
Posts: 1,160
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Heh, sorry, woman... Anyways, I got all that and it's not making a difference, text editor buttons dont work... the error pops up on the console in Chrome too... This is all my code related to this...

Code:
if ($perms['comment'])
{
	require_once(DIR . '/includes/functions_editor.php');
	$editorid = construct_edit_toolbar('',0,'nonforum',1,1,0,'qr_small');
}
Code:
$templater->register('editorid', $editorid);
$templater->register('messagearea', $messagearea);
Code:
<vb:if condition="$perms['comment']">
	<script type="text/javascript" src="clientscript/vbulletin-editor.js?v={vb:raw vboptions.simpleversion}"></script>
	<link rel="stylesheet" type="text/css" href="{vb:var vbcsspath}editor.css" />
	<link rel="stylesheet" type="text/css" href="{vb:var vbcsspath}bbcode.css" />

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

	<div name="commentform" id="commentform">
		<div class="mediarow floatcontainer" style="padding: 10px;">
			{vb:raw messagearea}
		</div>
	</div>
	<div style="padding-right: 30px; text-align: right;">
		<input type="submit" class="button" name="commentsubmit" id="commentsubmit" value="Submit Comment" />
	</div>

	<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="comment" />
	<input type="hidden" name="mid" value="{vb:var media.mediaID}" />

	</form>
</vb:if>

Everything works fine if I switch to the FE, instead of the QR... but I don't want to use the FE in this specific spot.
Reply With Quote
  #48  
Old 04-17-2010, 04:51 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 Jaxel View Post
<form action="media.php" name="vbform" method="post" onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(this.inputname.value, {vb:raw vboptions.postminchars})">
You forgot a very important part of form declaration:
Code:
enctype="multipart/form-data"
Also is good to add a class:
Code:
class="block vbform"
Reply With Quote
  #49  
Old 04-17-2010, 04:58 PM
Jaxel Jaxel is offline
 
Join Date: Sep 2005
Posts: 1,160
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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.
Reply With Quote
  #50  
Old 04-17-2010, 05:55 PM
Vaupell's Avatar
Vaupell Vaupell is offline
 
Join Date: Apr 2008
Location: Esbjerg, Denmark
Posts: 1,036
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by MicroHellas View Post
Just use this:
Code:
$editorid = construct_edit_toolbar($profile['bodytext'],1,'',0,1,($vbulletin->userinfo['userid']));
Please note that the last part is to show an editor according to usergroup permissions (eg full WYSIWYG). The first part, is the field name. You can use '' to let it empty.

Maria

Nope still wont transfer "message / bodycontents"

Ive made a video exsample
http://www.screencast.com/t/M2U2ZGU1NGUt

wow screencast stinks,, youtube for the win..
http://www.youtube.com/watch?v=MS2UXqNOA-0

i changed the "Type="POST" to TEST so i get the entire line postet in my URL field
for debugging.. and as seen on the video, message= thats it..


--------------- EDIT / UPDATE

If i change the editor mode to view BBcode (Aa button topright in editor) the text submit fine,
and it submits as wysiwyg=0 then it works.. which is strange..
so it has to be something with the initial setup...


--------------- EDIT / UPDATE 2 - it works if im logged out,
if im logged in, it dosent submit the textarea named message..
got to be login info in the php..


--------------- FINAL EDIT
just using Quick reply box, its the only one working for me..
the full editor got some problems with user permissions..
Reply With Quote
  #51  
Old 05-02-2010, 10:34 PM
bpr bpr is offline
 
Join Date: Dec 2009
Location: London
Posts: 57
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
@Vaupell

i got the same problem ! but i am not as far as your edits describe - i want to figure out, how it works in a proper way!does anybody know a solution ?
Reply With Quote
Reply
Page 5 of 10 « First 34 5 67 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 11:55 AM.

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.07537 seconds
  • Memory Usage 2,375KB
  • 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
  • (14)bbcode_code
  • (1)bbcode_html
  • (5)bbcode_php
  • (6)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
  • (4)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