Tiny MCE or text editor for Paragraph text?

Gravity Support Forums » Plugin Support » Gravity Forms

rovillesarate
Member

Hi! Is there a way to insert Tiny MCE text editor to a paragraph text box?

Posted 13 years ago on Thursday January 6, 2011 | Permalink
Kevin Flahaut
Administrator

Sure, you could implement TinyMCE with a bit of work if you wanted to. You would just need to target the ID's of the textareas, etc.

NicEdit is a lot easier to implement.

http://nicedit.com/

It's as easy as adding one line of script to your page template to enable a WYSIWYG editor for your textarea. It works really well.

screenshot

Posted 13 years ago on Thursday January 6, 2011 | Permalink
rovillesarate
Member

Does it also work with multi-step form? I actually tried niceEdit but its not working. When i reach to the third step where my text area is located. It doesn't seem to work. I still have the plain text area? is it a conflict does it only work on ordinary single form?

Posted 13 years ago on Thursday January 6, 2011 | Permalink
rovillesarate
Member

Tried NiceEdit with default type form. and it worked. but I don't know why it does not work with multi-step form? is it causing a conflict with the ajax? have you guys tried using nice edit with multi-step form?

Posted 13 years ago on Thursday January 6, 2011 | Permalink
Kevin Flahaut
Administrator

Nope, have not tried it with a multi-page form before.

EDIT: just tested and it works fine with a multi-page form using the standard submission (non-ajax) method.

screenshot: http://grab.by/8e9O

It may not work with Ajax forms since the page itself isn't actually reloaded and the script isn't re-initialized. We'll take a look at it and see if we can offer a suggestion.

Posted 13 years ago on Thursday January 6, 2011 | Permalink
David Smith
Member

Hey Rovillesarate, give this a try:

http://pastie.org/1434266

Just paste that in your functions.php. You can bind any function that needs to be run when the a new GF ajax page is loaded to the gform_page_loaded event.

The only piece you'll want to update is...

add_filter("gform_pre_render_3", "initialize_nicedit");

The 3 should be replaced with the ID of your form.

Posted 13 years ago on Thursday January 6, 2011 | Permalink
rovillesarate
Member
I am getting this error after including this to my function script
add_filter("gform_pre_render_3", "initialize_nicedit");

Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'initialize_nicedit' was given in /home1/sixeigcy/public_html/dealhummer/wp-includes/plugin.php on line 166

I used this script in my form page. For some reason It just wont work with ajax based form
```
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
        bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
  //]]>
  </script>
[gravityform id=3 name=SubscriptionForm title=false description=false ajax=true]
```
Posted 13 years ago on Friday January 7, 2011 | Permalink
rovillesarate
Member

Already got. So silly of me not to check the pastie link to check the whole script. Its already working. I am loving gravityforms more and more. Good thing I have bought the developer license. =D

Posted 13 years ago on Friday January 7, 2011 | Permalink
RichardBest
Member

Hi David - I've tried adding the code you provided above to one of my forms, i.e., by adding it to the functions.php file (within the TwentyTen theme) but the NicEdit is not appearing. IS adding your code to functions.php and specifying the right form ID all that needs to be done?

Many thanks
Richard

Posted 13 years ago on Thursday February 3, 2011 | Permalink
mendie
Member

Hey I have a multi-page form, and the niceEdit works, but the text I put inside does not save when I go to the next page in the form. I've tried both the Ajax and non-Ajax and the results are the same. Please help! I really need a text editor for my paragraph texts!

Posted 13 years ago on Tuesday April 19, 2011 | Permalink
Nitin
Member

Even I've been waiting for this feature since long. Is there any documentation for Tinymce integration?

Posted 12 years ago on Wednesday August 10, 2011 | Permalink
Kevin Flahaut
Administrator

@nitzs,

No. There isn't any TINYMCE-specific documentation here. It's not something that's a built into the plugin (yet) so not something we're supporting or documenting here. You can check the documentation on their site for instructions on how to implement this. The paragraph fields are standard textareas so you should be able to apply the editor to those elements relatively easily.

http://www.tinymce.com/

There are a multitude of plugins in the repository that might make it easier for you to implement TINYMCE on the front end if you prefer to go that route.

Posted 12 years ago on Wednesday August 10, 2011 | Permalink
Chineseand
Member
I tried David's add-on for the functions.php file. I also added the bit of code provided at nicedit.com:
```
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
```
to the top of the "edit page" screen in the wordpress backend just before the shortcode call to the gravity form form.

The form won't recognize when text has been added to the field.

Any thoughts on what might be going on there? I've tried with Ajax enabled, and with it disabled.

I'm hoping to use the pagination of the form to reduce confusion when content is copied and pasted in from Word or another editor (as it is returned in html when the page returns invalidated by entry errors).

Strange note: once in a while, I get an editor on the post body field, and not on the excerpt field (different pages). I've done hard refreshes, and I don't have a caching plugin enabled (buddypress site).

@mendie did you find out what was happening?

Thanks!
Posted 12 years ago on Sunday January 22, 2012 | Permalink
Chineseand
Member
Since my last post I've tried to add this code
```
<?php

add_filter("gform_pre_render_1", "initialize_nicedit");
function initialize_nicedit($form) {

    ?>

    <script src="full-URL-to-my-js-file" type="text/javascript"></script>
    <script type="text/javascript">
        if(window.jQuery) {
            jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page){
                nicEditors.allTextAreas();
            });
        }
    </script>

    <?php
    return $form;
}

?>
```
(with both 'allTextareas' and 'allTextAreas' - since the nicEdit website uses the lowercase for 'areas') but neither have worked. Do I need to reference the script from the page somehow as well? I can get it to work by adding this code:
```
<script src="url-to-my-js-file" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextareas);</script>
```
to the page above the shortcode for the gravity form, but the issue that I'm seeing there is that if I reference it from the page and not via the functions.php file, if the user doesn't fill in a required field, when GF returns the page the editor options are gone (and the textareas are sometimes messed up).

Any help on this would be appreciated. On a related note, people looking to clean up Word docs pasted into these fields can tweak the nicedit code with help from this site.
Posted 12 years ago on Friday February 3, 2012 | Permalink
Chineseand
Member

EDIT: sorry, the NicEdit site doesn't use lowercase for 'areas'..

The pastie code above seems to be missing a refernce to "bkLib.onDomLoaded" would that be part of teh problem I'm having getting this to work?

Posted 12 years ago on Friday February 3, 2012 | Permalink