[HOW TO] Add WYSIWYG Editor to Your Modifications

[Mythotical]

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: https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=S45W6HN9D3FGU)

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:
`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):
<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):
require_once(DIR . '/includes/functions_editor.php');
require_once(DIR . '/includes/functions_bigthree.php');

$editorid = construct_edit_toolbar('',1,'signature',1,1,($vbul letin->userinfo['userid'])); Then edit your template register and add the following:
$templater->register('editorid', $editorid);
$templater->register('messagearea', $messagearea);Add this line to your php file after you define special templates, global templates, etc:
define('GET_EDIT_TEMPLATES', true);Add these to your specialtemplates:
$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.

[RS_Jelle]

Instead of adding all these templates to globaltemplates, you could add this:

define('GET_EDIT_TEMPLATES', true);
Even better, use action templates:
define('GET_EDIT_TEMPLATES', 'action1,action2');

[zbahadir]

Thanks. :)

[Mythotical]

Instead of adding all these templates to globaltemplates, you could add this:

define('GET_EDIT_TEMPLATES', true);
Even better, use action templates:
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.

[RS_Jelle]

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:
// 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 (https://vborg.vbsupport.ru/showthread.php?t=178327) won't work (if it gets ported to vB4).

[Mythotical]

It just caches the editor templates, in an easier way :)

From /includes/class_bootstrap.php:
// 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 (https://vborg.vbsupport.ru/showthread.php?t=178327) 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.

[MaryTheG(r)eek]

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/clientscript/vbulletin-editor.js?v=400b5


Maria

[Mythotical]

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?

[MaryTheG(r)eek]

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

[Mythotical]

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.

[MaryTheG(r)eek]

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.

Thank you for taking the time to help me. If you want, I've post the full product at:
https://vborg.vbsupport.ru/showthread.php?t=230112
but I think that I follown your instructions step by step.

Maria

[Mythotical]

Apparently that error triangle is from subscriptions portion. Might be a bug with vB. I have tried to replicate it and even tried adding new tickets and such, still no error on my end. Sorry I couldn't provide more info than that. I'm actually sitting here scratching my head over it. LOL

[MaryTheG(r)eek]

Apparently that error triangle is from subscriptions portion. Might be a bug with vB. I have tried to replicate it and even tried adding new tickets and such, still no error on my end. Sorry I couldn't provide more info than that. I'm actually sitting here scratching my head over it. LOL

Ok:-)) Let to see if anybody report it in my post. My site is not the stablest on the net, actually it has nothing, so maybe something else causes it.

take care
Maria

[Mythotical]

Possibly, if you need help narrowing down where it may come from, I'll gladly help you out.

[AndrewD]

I've spent today tearing my hair out in updating the wysiwig editor from vb3.8 to v4.0 in a product I handle. Eventually, I tried reproducing the problem using the code suggested here, and the same problem arose. Basically, when in full WYSIWIG mode, the text entered into the message box is not being returned to the server, unless one first refreshes the page. In standard mode (obtained either by using the control switch in the editor, or by setting the appropriate vb options), everything works fine. This means that the problem cropped up with IE and Firefox but not with Google Chrome or Safari, which always use the standard editor.

For some reason, though, this problem does not seem to crop up in, e.g., the standard VB editpost code.

Possibilities are that I've made a mistake (quite possible...), or there's a bug in vb4.0 (I'm testing with RC2), or there's a switch/file that we're overlooking.

The attached files are, as far as I can tell, a straight copy of the material posted at the start of this article, within a script that simply keeps re-presenting the form along with a record of the message entered by the user the previous time round. I'd be very grateful if someone can independently test this, and let me know if I'm going crazy or not.

The two files are a php script to be loaded into the forum directory, and a template.

[Mythotical]

I noticed 2 things.

First:
$retvars .= "message:".$vbulletin->GPC['message'].":<br />";

You have that but not registered it for use in the template.

Second:
In your template I notice you have the form pointing to the same file that you are using to fill out this form. Am I mistaken that maybe you didn't give the process form location.

Also I noticed that you don't have this in your file:
define('GET_EDIT_TEMPLATES', true);

With your submit button, try this instead:
<input name="submit" class="button" type="submit" id="save" value="submit" />

[AndrewD]

Thanks for the suggestions, see below.

I noticed 2 things.

First:
$retvars .= "message:".$vbulletin->GPC['message'].":<br />";

You have that but not registered it for use in the template.

Also I noticed that you don't have this in your file:
define('GET_EDIT_TEMPLATES', true);


sorry, Steve, not true - both are done (line 7 and 45 in the php file)


Second:
In your template I notice you have the form pointing to the same file that you are using to fill out this form. Am I mistaken that maybe you didn't give the process form location.


this was intended to be a simpe demo of the problem, and the script is designed to return to itself, report what was filled in the message box, and then re-present the editor. So, there's no error with that, and the same issue presents itself in the (much more complex) product code I'm working on.


With your submit button, try this instead:
<input name="submit" class="button" type="submit" id="save" value="submit" />

This makes no difference. The message box contents are being correctly picked up in standard editor mode but not in wysiwig mode.

[Mythotical]

Then you have completely contradicted what you said earlier about it not working. If you can't show me how this is being used in the complexity that you are trying to make it work then I can be of no help. Lastly there apparently is an error as you stated earlier and now you state there is no error. Overall you have your code set so without more info then I am of no help any further. Sorry.

[AndrewD]

Then you have completely contradicted what you said earlier about it not working. If you can't show me how this is being used in the complexity that you are trying to make it work then I can be of no help. Lastly there apparently is an error as you stated earlier and now you state there is no error. Overall you have your code set so without more info then I am of no help any further. Sorry.

I'll try to be a little clearer, since I didn't intend to seem to contradict myself.

The supplied attached php + template is a straightforward implementation of the code given in the first post, intended to demonstrate the problem.

With this demo code, and with the more complex product implementation, the contents of the editor message box are correctly returned (with all browser choices) when the editor is set to standard mode but not when it is set to wysiwig mode. I can consistently reproduce this problem on my own system. I am asking for someone else to attempt to reproduce it on another, so that I can be sure that it is/is not a bug in my coding or in the vb infrastructure.

[Mythotical]

I'll try to be a little clearer, since I didn't intend to seem to contradict myself.

The supplied attached php + template is a straightforward implementation of the code given in the first post, intended to demonstrate the problem.

With this demo code, and with the more complex product implementation, the contents of the editor message box are correctly returned (with all browser choices) when the editor is set to standard mode but not when it is set to wysiwig mode. I can consistently reproduce this problem on my own system. I am asking for someone else to attempt to reproduce it on another, so that I can be sure that it is/is not a bug in my coding or in the vb infrastructure.

Ok gotcha, I will test it out and check for you.

--------------- Added 1260816961 at 1260816961 ---------------

Ok tested it, you had a few issues in your template but I changed them to match my site mainly and it worked.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" id="vbulletin_html">

<head>
<!-- BEGIN TEMPLATE: headinclude -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta id="e_vb_meta_bburl" name="vb_meta_bburl" content="/vb40/" />
<base href="/vb40/" /><!--[if IE]></base><![endif]-->
<meta name="generator" content="vBulletin 4.0.0 Release Candidate 2" />


<meta name="keywords" content="vbulletin,jelsoft,forum,bbs,discussion,bulletin board" />
<meta name="description" content="This is a discussion forum powered by vBulletin. To find out about vBulletin, go to http://www.vbulletin.com/ ." />


<script type="text/javascript" src="clientscript/yui/yuiloader-dom-event/yuiloader-dom-event.js?v=400rc2"></script>
<script type="text/javascript" src="clientscript/yui/connection/connection-min.js?v=400rc2"></script>
<script type="text/javascript">
<!--
var SESSIONURL = "";
var SECURITYTOKEN = "1260802232-afa16d4d00cd73257e7c03c916068b2ffef8d4c5";
var IMGDIR_MISC = "images/misc";
var IMGDIR_BUTTON = "images/buttons";
var vb_disable_ajax = parseInt("0", 10);
var SIMPLEVERSION = "400rc2";
var BBURL = "/vb40";
// -->
</script>

<script type="text/javascript" src="clientscript/vbulletin-core.js?v=400rc2"></script>


<link rel="stylesheet" type="text/css" href="clientscript/yui/reset-fonts/reset-fonts.css" />
<link rel="stylesheet" type="text/css" href="css.php?styleid=1&amp;langid=1&amp;d=1260798350&amp;td=ltr&amp;she et=vbulletin.css,popupmenu.css,vbulletin-chrome.css,components.css,vbulletin-formcontrols.css,editor.css" />


<!-- END TEMPLATE: headinclude -->


<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}vbulletin-formcontrols.css" />
<link rel="stylesheet" type="text/css" href="{vb:var vbcsspath}editor.css" />
<link rel="stylesheet" type="text/css" href="{vb:var vbcsspath}bbcode.css" />


</head>
<body>

{vb:raw header}

{vb:raw navbar}

{vb:raw retvars}

<form class="vbform block" action="aaaatest.php" method="post" name="vbform" onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(this.inputname.value, {vb:raw vboptions.postminchars})">
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<div class="wysiwyg_block">
<div class="blockbody formcontrols">
<div class="blockrow">
{vb:raw messagearea}
</div>
</div>
</div>

<div class="blockfoot actionbuttons">
<div class="group">
<input name="submit" class="button" type="submit" id="{vb:raw editorid}_save" value="submit" />
</div>
</div>

</form>
{vb:raw footer}
</body>
</html>

--------------- Added 1260816996 at 1260816996 ---------------

It all had to do with link tags and script tags.

EDIT AGAIN:
Tested again with your code and it worked that time so looks like it was in the template.

The way you have it, I have no idea why it won't work that way, not even sure what could cause it to not post.

[xman_79]

not understand why you use


define('GET_EDIT_TEMPLATES', true);


The php file


error_reporting(E_ALL & ~E_NOTICE);
define('THIS_SCRIPT', 'name_of_your_script');
define('CSRF_PROTECTION', true);

$phrasegroups = array('posting');

$specialtemplates = array('smiliecache','bbcodecache',);

$globaltemplates = array(
'newpost_disablesmiliesoption',
'newpost_usernamecode',
'editor_toolbar_on',
'editor_clientscript',
'editor_jsoptions_font',
'editor_jsoptions_size',
'editor_smilie',
'editor_smiliebox',
'editor_smiliebox_row',
'editor_smiliebox_straggler',
'editor_css',
'editor_smilie_category',
'editor_smilie_row',
'editor_toolbar_colors',
'editor_toolbar_fontname',
'editor_toolbar_fontsize',
'bbcode_code_printable',
'bbcode_html_printable',
'bbcode_php_printable',
'bbcode_quote_printable',
'bbcode_code',
'bbcode_html',
'bbcode_php',
'bbcode_quote',
'bbcode_video',
);

require_once(DIR . '/includes/functions_editor.php');

$editorid = construct_edit_toolbar('', 0, 'signature', 1, 1, false);


$templater = vB_Template::create('MY_EDITOR_TEMPLATE');
$templater->register('editorid', $editorid);
$templater->register('messagearea', $messagearea);
$myeditortemplate = $templater->render();


I use the editor to about 10 hacks, I have no problem.

[Mythotical]

The part that I use above is sticking with code ethics basically, it saves on lines of code per file and does the same exact thing as this does:

$globaltemplates = array(
'newpost_disablesmiliesoption',
'newpost_usernamecode',
'editor_toolbar_on',
'editor_clientscript',
'editor_jsoptions_font',
'editor_jsoptions_size',
'editor_smilie',
'editor_smiliebox',
'editor_smiliebox_row',
'editor_smiliebox_straggler',
'editor_css',
'editor_smilie_category',
'editor_smilie_row',
'editor_toolbar_colors',
'editor_toolbar_fontname',
'editor_toolbar_fontsize',
'bbcode_code_printable',
'bbcode_html_printable',
'bbcode_php_printable',
'bbcode_quote_printable',
'bbcode_code',
'bbcode_html',
'bbcode_php',
'bbcode_quote',
'bbcode_video',
);

Just one line of code instead of 10-15 lines to call all those templates.

In all honesty, you don't have to call these templates as you have done:
'bbcode_code_printable',
'bbcode_html_printable',
'bbcode_php_printable',
'bbcode_quote_printable',
'bbcode_code',
'bbcode_html',
'bbcode_php',
'bbcode_quote',
'bbcode_video',

From what I have learned is that each one of those templates is already cached and called when you use the editor.

[MaryTheG(r)eek]

Hello Steve,

I've problem including the editor in my mod. See the attached images to understand what I mean. The first one is without including "...GET_EDIT_TEMPLATES..." in my php file, the second is with this.

http://www.microhellas.com/dev4/auctions.php?do=addedititem

I'm also getting that yellow triangle:

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Date/Time: Thu, 24 Dec 2009 10:18:59 UTC

Message: Το 'vB_XHTML_Ready' has not been assigned
Line: 11
Character: 1
Code: 0
URI: http://www.microhellas.com/dev4/clientscript/vbulletin-editor.js?v=400


Thank you in advance
Maria

PS- I found the solution

At the very top of the template,

After:

<![CDATA[


and Before:

<html xmlns="http://www.w3.org/1999/xhtml" dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">


Must be:

{vb:stylevar htmldoctype}


But that dammit triangle still exists.

Merry Christmas Steve (and to all surfers of course).
Maria

[Mythotical]

Great to hear Maria.

[MaryTheG(r)eek]

Hello Steve,

In view mode the text loses some formatting (in my case bullets). See attachment 1 which is in edit mode. Bullet list has been saved correctly. Now the 2nd attachment. Even if the text coloring is ok, the bullet list appears as normal text lines.

The code that I've wrote:

PHP file

// Format Bodytext
$bodytext = $item["bodytext"];
$bodytext = convert_wysiwyg_html_to_bbcode($bodytext);
$bbcode_parser =& new vB_BbCodeParser($vbulletin, fetch_tag_list());
$bodytext = $bbcode_parser->parse($bodytext, $post['allowsmilie']);


Template

<tr>
<td colspan="4" class="blockrow" align="left" width="100%">
{vb:raw bodytext}
</td>
</tr>


Thank you
Maria

[Mythotical]

Thanks Maria, I will get it altered in the article.

[mikey1991]

Steve, I know you posted this article for vB3, or one was posted, I just cannot find it. Any help?

[Mythotical]

Steve, I know you posted this article for vB3, or one was posted, I just cannot find it. Any help?

Here is the article, not written by me: Add Editor to Your Mods (https://vborg.vbsupport.ru/showthread.php?t=135708)

[mikey1991]

Great, thanks alot steve, appreciate that.

[Mythotical]

Great, thanks alot steve, appreciate that.

Your welcome.

[Jaxel]

Anyone got any ideas on what I should put in my DATAMANAGER so that it verifies a text field?

[Jaxel]

Okay... I've followed this guide EXACTLY... but I have a few questions and problems... I've circled the obvious problems in red...

https://vborg.vbsupport.ru/attachment.php?attachmentid=115004&stc=1&d=1269919038

1 - "Fonts" dropdown menu is missing.
2 - "Sizes" dropdown menu is missing the word "Sizes".
3 - "Bullets" and "Lists" buttons are missing.
4 - "Quote" "Code" "PHP" buttons are missing.
5 - I have no need for attachments or video embedding in this, so I would like to remove those buttons.
6 - "Tooltips" (alt tags?) are missing from all buttons.
7 - The word "More" on the bottom right is missing.

In VB3, in order to put an editor into your mod, you had to do some plugin work. I assume that is gone now?

Also, when posting the textarea to my script, what is the variable name? $vbulletin->GPC['message'] perhaps?

And how do I add a DEFAULT VALUE for this textarea?

[Jaxel]

Looking at this code here in the guide is COMPLETELY outdated:
$editorid = construct_edit_toolbar('',1,'signature',1,1,($vbul letin->userinfo['userid']));

This works for me: fixed a few of my problems, but not all.... the only still missing is the phrasegroup for Fonts, Sizes and More.
$editorid = construct_edit_toolbar($description,0,'nonforum',1 ,1,0);

New question, how do we use the QR? I tried adding 'qr' to the end of the construct, but it killed entry into the box.

[Mythotical]

Sorry haven't had time to update this guide to match 4.0 gold release. I will get to it once I am able.

[Jaxel]

Add the following if you want to use QR (Quick Reply)

$show['qr_require_click'] = 0;
$editorid = construct_edit_toolbar('',0,'nonforum',1,1,0,'qr') ;


Unfortunately, I am having a bug, where the buttons on the quick-reply bars aren't working. They work fine on the FE (Full Editor), but not the QR.

[Jaxel]

Whenever I use the QR editor, I always get an error...

Uncaught ReferenceError: vB_Text_Editor is not defined

If I change to the FE editor, the error disappears.

[Jaxel]

Has anyone been able to get the QR editor working yet?

[MaryTheG(r)eek]

Has anyone been able to get the QR editor working yet?

I've included it in all of my mods for vb4. Where are you facing difficulties?

Maria

[Jaxel]

This is the code I am using...

if ($perms['comment'])
{
require_once(DIR . '/includes/functions_editor.php');
$show['qr_require_click'] = 0;
$editorid = construct_edit_toolbar('',0,'nonforum',1,1,0,'qr_s mall');
}
$templater->register('editorid', $editorid);
$templater->register('messagearea', $messagearea);


But I keep getting the following error:
Uncaught ReferenceError: vB_Text_Editor is not defined

As well, none of the buttons on the QR work. If I change the editor to FE, it works fine without error.

[Vaupell]

Works great, Thanks microhellas.

[MaryTheG(r)eek]

Hello all,

The code to include qr editor is:

1.- PHP File

$editorid = construct_edit_toolbar('', false, 'nonforum', false, true, false, 'qr');
.......
$templater->register('editorid', $editorid);
$templater->register('messagearea', $messagearea);


2.- Template

<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

[Vaupell]

Hello all,

The code to include qr editor is:

1.- PHP File

$editorid = construct_edit_toolbar('', false, 'nonforum', false, true, false, 'qr');
.......
$templater->register('editorid', $editorid);
$templater->register('messagearea', $messagearea);


2.- Template

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

[MaryTheG(r)eek]

but the full editor wont work for me
message returns blank..

Just use this:

$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

[Jaxel]

I dont know man... I copy and pasted your code EXACTLY and I'm still getting the same error.
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.

[MaryTheG(r)eek]

I dont know man... I copy and pasted your code EXACTLY and I'm still getting the same error.
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:

<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 1271525701 at 1271525701 ---------------

I dont know man...

By the way... I'm WOMAN.

Maria

[Jaxel]

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...

if ($perms['comment'])
{
require_once(DIR . '/includes/functions_editor.php');
$editorid = construct_edit_toolbar('',0,'nonforum',1,1,0,'qr_s mall');
}
$templater->register('editorid', $editorid);
$templater->register('messagearea', $messagearea);
<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.

[MaryTheG(r)eek]

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

enctype="multipart/form-data"


Also is good to add a class:

class="block vbform"

[Jaxel]

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.

[Vaupell]

Just use this:

$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..

[bpr]

@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 ?

[bananalive]

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>
<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.

[identitas]

Have som problems here. The 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.

[Jaxel]

What exactly does this part do?

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?

[MaryTheG(r)eek]

What exactly does this part do?

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

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"

input type="submit" class="button" name="sbutton" value="{vb:var vbphrase.microdating_submit}" onclick="return validateForm_vbform()">


Maria

[Jaxel]

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.

[bananalive]

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.

[Jaxel]

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 1273268438 at 1273268438 ---------------

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.

[bpr]

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.

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

[forumdude]

Steve,

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

Thanks.

[angedelamort]

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:

$editorid = construct_edit_toolbar('',1,'signature',0,1,($vbul letin->userinfo['userid']));
the parameter in red is if we want to the smillies or not. Hope it's going to help someone else.

[Cadellin]

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.

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?

[jujubins]

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?

[FCS-Webmaster]

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

[RaidenDAWG2]

I may have a solution to the WYSIWYG problem here.

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

<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.

[iBaker]

Does this need to be updated for the new editor or is there a newer How To elsewhere?

[Ziki]

I may have a solution to the WYSIWYG problem here.

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

<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!!

[Mythotical]

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

[sweeps78]

Hi Steve,

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

[bananalive]

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:

define('GET_EDIT_TEMPLATES', true);

In your php file in your main script, you'll need:

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>

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


In your template <body>



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

[sweeps78]

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

[Mythotical]

I will get this updated in the next day or so. Thanks bananalive for the update, I will check the difference and get an update done.

[sweeps78]

Probably a stupid question, but how do we retrieve the text inside the messagearea?

[Mythotical]

When passing the data, it is passed as 'message'.

[Easy5s.net]

pls tut add WYSIWYG to admincp :D

[Easy5s.net]

I integrate it into the admincp but it does not display error icon. :confused:

[bipro]

how to add CKEditor to my custom php page without using TemplateEngine of vbb. Thanks

[Cadellin]

I've come back to this to update my product from the old WYSIWYG to CKEditor and after following the instructions here (https://vborg.vbsupport.ru/showpost.php?p=2250242&postcount=69) I'm just getting an empty box - no editor, text area or buttons.

Could anyone offer any advice what could be going wrong or even offer a clean working version I could try? I'm running the latest 4.1.7 PL2.

A full new article would definitely be worthwhile if someone in the know could spare the time as the old one is now so outdated it's just confusing.

Thanks

[Hippy]

yes could some one explain how to add this new vb editor .. it would be great appreciated

[Mythotical]

I will be testing this on 4.1 platform tonight or tomorrow. First my homework for class then coding. :P

[Cadellin]

I will be testing this on 4.1 platform tonight or tomorrow. First my homework for class then coding. :P

If you get it working I don't suppose you could write up an improved article? It would be great to be able to update my mods to use WYSIWYG once again.

[Mythotical]

If you get it working I don't suppose you could write up an improved article? It would be great to be able to update my mods to use WYSIWYG once again.
Sure will, guaranteed. I'm about to test it now that I'm out of classes until Friday.

--------------- Added 1326984759 at 1326984759 ---------------

So far I have ran into a couple of issues. I will have things ironed out later today and then I'll update my article.

[Cadellin]

I can't tell you how happy that makes me :)

Cheeky I know but could you cover how to load contents into the editor at startup? I.e. Using it to edit something rather than create afresh.

It's something I never managed to find an explanation of how to do in vB-Editor and my own attempts ended in failure. - Thanks!

[Hippy]

thanks steve_m

[Mythotical]

I can't tell you how happy that makes me :)

Cheeky I know but could you cover how to load contents into the editor at startup? I.e. Using it to edit something rather than create afresh.

It's something I never managed to find an explanation of how to do in vB-Editor and my own attempts ended in failure. - Thanks!
I will try to include that.

thanks steve_m
No problem

--------------- Added 1327024413 at 1327024413 ---------------

I have updated the article. I am now testing on the latest release of vBulletin.

[Cadellin]

Thanks Steve :)

Could you clarify by what you mean by "Make sure you have this code in the area where your template containing the editor is to be called" as my editor isn't loading - the smilies etc.. are but there is just a blank space where the editor should be.

Thanks

EDIT: Fixed

// get special data templates from the datastore
$specialtemplates = array('smiliecache','bbcodecache');
// pre-cache templates used by all actions
$globaltemplates = array('yourtemplatename');
define('GET_EDIT_TEMPLATES', true);
// pre-cache templates used by specific actions
$actiontemplates = array();

must be below

require_once('./includes/functions_user.php');
require_once('./includes/functions_editor.php');
require_once('./includes/functions_bigthree.php');

The example template I originally used to base all my files off has them the other way around so I suspect I won't be the only one.

EDIT2:

Steve could you also advise about parsing the output of the new WYSIWYG? The old one had a special function I seem to remember but I can't find it.

[Mythotical]

Thanks Steve :)

Could you clarify by what you mean by "Make sure you have this code in the area where your template containing the editor is to be called" as my editor isn't loading - the smilies etc.. are but there is just a blank space where the editor should be.

Thanks

EDIT: Fixed

// get special data templates from the datastore
$specialtemplates = array('smiliecache','bbcodecache');
// pre-cache templates used by all actions
$globaltemplates = array('yourtemplatename');
define('GET_EDIT_TEMPLATES', true);
// pre-cache templates used by specific actions
$actiontemplates = array();must be below

require_once('./includes/functions_user.php');
require_once('./includes/functions_editor.php');
require_once('./includes/functions_bigthree.php');The example template I originally used to base all my files off has them the other way around so I suspect I won't be the only one.

EDIT2:

Steve could you also advise about parsing the output of the new WYSIWYG? The old one had a special function I seem to remember but I can't find it.
Make sure you installed the provided plugin. Then you $messagearea where you want it to appear.

If nothing else zip up your files and templates in a file and I'll have a look at it.

[Cadellin]

Thanks Steve - switching around the special templates and includes fixed the issue. My issue now is cleaning up the output from the editor for MYSQL and then parsing it again for display.

[Mythotical]

Thanks Steve - switching around the special templates and includes fixed the issue. My issue now is cleaning up the output from the editor for MYSQL and then parsing it again for display.
Like I said, I'm willing to look over your code for you if you wish. Just let me know.

[Cadellin]

Thanks for the offer Steve but I've now got everything working satisfactorily including editing which is a bonus.

[Mythotical]

Thanks for the offer Steve but I've now got everything working satisfactorily including editing which is a bonus.
Great to hear. Good luck.

[Ziki]

Hm, I can't seem to get it working. Your previous code worked fine after the upgrade, then the editor didn't show up, so I applied the changes bananalive posted, now it shows up but the editor toolbar is not showing up :-/ Any idea what I might be missing?

http://www.kxdesign.com/a/editor.PNG

[Ziki]

Anybody got this working on 4.1.11?

[Cadellin]

Mine isn't working earlier on 4.1.11. Haven't tried 4.1.12 yet.

[Altari]

I had to add$phrasegroups = array(
'posting',
);

to make it works. Before this, it only displayed a broken basic text area with smileys.

[wolfe]

how do i use this as a inline reply or how do i use the inline edit ? any ideas thanks

[veryfunny]

I've followed the instructions, but all i can manage to get is the box that is missing all the font / formatting controls...

Can anyone shed any light on what is missing?

I can set the default text value in the box + include smilies etc, but it is coming up with a textarea only.

Thanks in advance

A link to what i'm getting is

http://www.ae86drivingclub.com.au/onlinesales/upload2.php

[veryfunny]

does anyone follow these forums anymore?

[sodagod]

I can't seem to get this to post with bbcode, it seems to render html when ever I save the data to the database.

I am using $db->escape_string($message) before saving to the database.

I am also using $bbcode_parser on the display page.

I have $ishtml set to 0 also.

hmmm