Text editor for Paragraph text on Custom Field

Gravity Support Forums » Plugin Support » Gravity Forms

WebEndev
Member

I got this code http://pastie.org/1434266, from this post http://www.gravityhelp.com/forums/topic/tiny-mce-or-text-editor-for-paragraph-text

And can't seem to get it working... I put it in functions.php (am using Studiopress Genesis v 1.61), but the JS does not load (checked with Firebug).
So I loaded the JS successfully another way, but the editor is still not there.
My form is not multipage, and has 5 custom field paragraphs that are conditional upon other fields. I even tried removing the conditional on one of them.
I am running this on a local install (XAMPP), but don't see what that would have to do with it.

Any suggestions? Is there maybe another editor that I might install directly that someone has had success implementing?

P.S. - what I am actually trying to do is keep the paragraph formatting from the custom field. It currently puts all text together, even though it is entered with line breaks. (I don't want the person filling out the form to have to use html to get the paragraphs).
I'm open to suggestions on how to do this, without the text editor mentioned above...

Would be a really nice feature if GF had a built in text editor like Tiny MCE....

Posted 12 years ago on Tuesday June 7, 2011 | Permalink
Kevin Flahaut
Administrator
If you're not using multi-page forms with Ajax, then you should be able to simply include the Nicedit scripts directly into your page template per the instructions on their home page.

http://nicedit.com/
```
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
```
Had you already tried that?
Posted 12 years ago on Tuesday June 7, 2011 | Permalink
WebEndev
Member

Hi Kevin,
Yes, tried that too. I put that script in the <head> and I can see the script loading in Firebug. But no editor.... :(
No errors in Firebug...
Very strange...

Posted 12 years ago on Tuesday June 7, 2011 | Permalink
Kevin Flahaut
Administrator

I created a real quick post form with a HTML block at the top, Post Title, Post Body, Post Category & Custom Field (Type Paragraph Text).

I copied the script block directly from the Nicedit page then actually added that to my HTML block at the first of the form. I saved the form and previewed it. Both the Post Body & Custom Field paragraph text (textareas) have working Nicedit WYSIWYG editor in place.

screenshot: http://grab.by/aj6T

If you've added the scripts in the right place and they're not working, it seems like you might have some kind of script conflict with your theme or a plugin. Have you tried using a different theme to test?

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
WebEndev
Member

Hi Kevin,
It worked. But here is the key - you must create an HTML block and put the script there. Then the editor appears.

One last question - the paragraph inputs are very narrow. Do you normally have this happen? Do you just adjust them with CSS?
Thank you sir!

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
WebEndev
Member

Kevin,
Update on the widths of the inputs (and the editor options bar) -
Even when I adjust them using CSS (which is very strange that I would have to), It still leaves the actual width of the entry at 92px
Any experience with this issue?

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
Kevin Flahaut
Administrator

No. I didn't have any similar issues. It sounds like some inheritance issue from your theme. I'd have to see it to be able to really tell you anything useful.

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
WebEndev
Member

Here's a link
Can you take a look?
I'm not seeing it yet...

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
WebEndev
Member

It's creating it at 92px, and also it is creating it with columns of 50.
<textarea cols="50" rows="10" tabindex="5" class="textarea large" id="input_7_21" name="input_21" style="display: none;"></textarea>

I have the paragraph field set to 'Large' in GF.

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
Kevin Flahaut
Administrator

I checked in 3 different browsers here and it looks fine on my end. It looks like the script is setting an inline width value of 577px on the textarea.

screenshot: http://grab.by/ajiC

What browser are you seeing the issue in? Does it persist in other browsers?

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
WebEndev
Member

I'm using Firefox 4. I also tried it in Chrome (latest version), and IE9. All have a problem.

Looking in Firebug, this is the input area:

<div style="width: 92px; border-width: 0pt 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-image: none; overflow-y: auto; overflow-x: hidden;"><div contenteditable="true" style="width: 84px; margin: 4px; min-height: 250px; overflow: hidden;" class=" nicEdit-main">
</div></div>

I am seeing lot of comments on the NicEdit forum relating to width. But all of those are a direct install of NicEdit, not serving the JS from the NicEdit servers like I am doing.

I can't understand why you see it with the 577 width?? (yes, I've cleared my cache several times)

Frustrating!!

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
WebEndev
Member

Kevin,

Wait - That is the closing comments area you are seeing it looks ok on.

Select a question for question 1 and the text area for that answer will appear. It's the conditional fields that has the problem.

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
WebEndev
Member

That was it.
If you have the paragraph text field set to conditional based upon another field (I had mine set for Answer 1 being conditional on Question 1 selection), then when you select a question, and the text box field displays, it displays with the wrong width.

It must be a JS thing between NicEdit and the load of the GF fields....

Anyway, not ideal, but at least I can get it to work if I don't use the conditionals.

Thanks much for your help! Great support!

P.S. - A text editor feature built into Gravity would be AWESOME! :)

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
Kevin Flahaut
Administrator

Okay, sorry I was on the wrong page there but glad you figured it out. We've discussed adding the WordPress TinyMCE editor as an option in a future release so I'm sure it's something that you'll see sooner than later.

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
WebEndev
Member

Thanks Kevin.

Is there a 'relatively easy' way to integrate another text editor like Tiny MCE, or CkEditor, etc, that you know of?

If I were to directly integrate one of them, I might be able to use the conditional fields and avoid the JS issue that I am having with NicEdit.

+100 votes on TinyMCE with Gravity!

Thanks again

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
Kevin Flahaut
Administrator

I haven't tried adding another WYSIWYG editor in a bit but I'll run a couple of tests here and let you know what I find. Usually, Nicedit has been the easiest for everyone to install. Of course as the plugin gets more complex those things sometimes need to change as well.

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
WebEndev
Member

Kevin,
Another note on NicEdit -
It seems that you cannot enter paragraphs (line breaks).

This is what I was originally trying to solve.
Is there a way to maintain paragraphs when entering text into a custom field paragraph field?
When entering line breaks into a custom field paragraph field, the text loses the paragraph breaks in when stored in the custom field.

If I need to start a new post for this question, I can...

Posted 12 years ago on Wednesday June 8, 2011 | Permalink
Kevin Flahaut
Administrator

Sorry, missed this last post a while back somehow.

Yeah, as it turns out there is a known issue with NicEdit when the textarea is nested in a list structure like Gravity Forms is. The problem seems to be isolated to FireFox. You can shift+return in the field for a line break, but that's pretty much useless for a public-facing site.

http://stackoverflow.com/questions/3308372/nicedit-problem-in-next-line

Until they get that fixed, you're probably better using another solution like TinyMCE or the CKEditor.

Posted 12 years ago on Wednesday September 14, 2011 | Permalink
WebEndev
Member

Hi Kevin,

Are there still plans to integrate TinyMCE with Gravity Forms? You had mentioned that it might make version 1.6, but it didn't. When do you see it happening?

It would be a great addition!

Posted 12 years ago on Wednesday September 14, 2011 | Permalink
Kevin Flahaut
Administrator

Yes, sooner than later is the plan. We have a huge list of new features for 1.6 already so I'm pretty sure that's not going to to make the initial v.1.6 cut. We have to wrap up the development on 1.6 and get it released sometime very soon. If the WYSIWYG editor doesn't make it in 1.6 ( again, probably not ) I'm hoping it may make a subsequent point release but definitely want to get it in by the 1.7 version.

Posted 12 years ago on Wednesday September 14, 2011 | Permalink
WebEndev
Member

That would be great Kevin.

Thanks!

Posted 12 years ago on Wednesday September 14, 2011 | Permalink
Kevin Flahaut
Administrator

Yeah, I know it's something a lot of folks want, and we want to get it in there for sure, we just have to stop somewhere in the list and call it a release. Thanks for hanging in there in the mean time.

Posted 12 years ago on Wednesday September 14, 2011 | Permalink
WebEndev
Member

Not a problem hanging in there.

BTW - version 1.6 is really awesome!

Posted 12 years ago on Thursday September 15, 2011 | Permalink
sascha
Member

Any news about when a simple editor will be added? That would be so exciting!

Posted 12 years ago on Wednesday January 11, 2012 | Permalink
Chris Hajer
Key Master

The rich text editor is being added to the admin area for the notifications first, and will be rolled out to other areas as appropriate. The enhancements in WordPress 3.3 made it possible to use the rich text editor in other areas.

Posted 12 years ago on Wednesday January 11, 2012 | Permalink
sascha
Member

Ok, great! I managed to add NicEdit for now. That will do until you guys add something better!

Posted 12 years ago on Saturday January 14, 2012 | Permalink