vb.org Archive - [HOW TO] Add WYSIWYG Editor to Your Modifications

Page 2 of 3

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4 Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=242)

- - [HOW TO] Add WYSIWYG Editor to Your Modifications (https://vborg.vbsupport.ru/showthread.php?t=228693)

MaryTheG(r)eek

04-17-2010 03:24 PM

1 Attachment(s)

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

Vaupell

04-17-2010 03:37 PM

Quote:

Originally Posted by MicroHellas (Post 2022699)

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:

MaryTheG(r)eek

04-17-2010 04:10 PM

Quote:

Originally Posted by Vaupell (Post 2022705)

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

Jaxel

04-17-2010 04:27 PM

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.

MaryTheG(r)eek

04-17-2010 04:33 PM

Quote:

Originally Posted by Jaxel (Post 2022737)

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 (Post 2022737)

I dont know man...

By the way... I'm WOMAN.

Maria

Jaxel

04-17-2010 04:42 PM

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.

MaryTheG(r)eek

04-17-2010 04:51 PM

Quote:

Originally Posted by Jaxel (Post 2022746)

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"

Jaxel

04-17-2010 04:58 PM

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

04-17-2010 05:55 PM

Quote:

Originally Posted by MicroHellas (Post 2022730)

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

bpr	05-02-2010 10:34 PM

@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

05-03-2010 01:43 PM

Quote:

Originally Posted by Jaxel (Post 2022754)

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.

identitas

05-04-2010 04:42 PM

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.

Jaxel

05-07-2010 03:59 AM

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?

MaryTheG(r)eek

05-07-2010 04:58 AM

Quote:

Originally Posted by Jaxel (Post 2032934)

What exactly does this part do?

Code:

onsubmit="return vB_Editor['{vb:raw editorid}'].prepare_submit(this.inputname.value, {vb:raw vboptions.postminchars})"

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

Jaxel

05-07-2010 07:51 AM

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

05-07-2010 03:24 PM

Quote:

Originally Posted by identitas (Post 2031682)

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

05-07-2010 07:32 PM

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.

bpr	05-12-2010 02:26 PM

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

forumdude

05-25-2010 04:29 AM

Steve,

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

Thanks.

angedelamort

06-15-2010 10:26 PM

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.

Cadellin

11-12-2010 09:52 PM

Quote:

Originally Posted by bpr (Post 2035776)

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

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

11-19-2010 06:31 PM

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

12-16-2010 03:59 PM

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

12-31-2010 01:38 AM

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})">

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.

iBaker

09-05-2011 05:03 AM

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

Ziki	09-05-2011 08:05 AM

Quote:

Originally Posted by RaidenDAWG2 (Post 2141632)

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})">

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})"

Thank you, that worked!!

Mythotical

09-23-2011 02:18 AM

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

09-26-2011 01:27 PM

Hi Steve,

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

bananalive

09-26-2011 03:36 PM

Quote:

Originally Posted by sweeps78 (Post 2250193)

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>

sweeps78

09-26-2011 04:14 PM

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

09-26-2011 09:28 PM

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

10-06-2011 02:10 PM

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

Mythotical

10-06-2011 08:40 PM

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

Easy5s.net

10-08-2011 03:00 AM

pls tut add WYSIWYG to admincp :D

Easy5s.net

10-27-2011 02:24 AM

1 Attachment(s)

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

bipro

11-03-2011 04:39 AM

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

Cadellin

11-05-2011 07:45 PM

I've come back to this to update my product from the old WYSIWYG to CKEditor and after following the instructions here 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

01-10-2012 12:46 PM

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

Mythotical

01-18-2012 12:52 AM

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

Cadellin

01-18-2012 06:11 PM

Quote:

Originally Posted by Steve M (Post 2289200)

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.

All times are GMT. The time now is 04:31 PM.

Page 2 of 3

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01723 seconds Memory Usage 1,895KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (20)bbcode_code_printable (2)bbcode_html_printable (9)bbcode_php_printable (13)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: