PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Text editor for Paragraph text on Custom Field

  1. 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 9 years ago on Tuesday June 7, 2011 | Permalink
  2. 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 9 years ago on Tuesday June 7, 2011 | Permalink
  3. 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 9 years ago on Tuesday June 7, 2011 | Permalink
  4. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  5. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  6. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  7. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  8. Here's a link
    Can you take a look?
    I'm not seeing it yet...

    Posted 9 years ago on Wednesday June 8, 2011 | Permalink
  9. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  10. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  11. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  12. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  13. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  14. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  15. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  16. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  17. 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 9 years ago on Wednesday June 8, 2011 | Permalink
  18. 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 9 years ago on Wednesday September 14, 2011 | Permalink
  19. 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 9 years ago on Wednesday September 14, 2011 | Permalink
  20. 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 9 years ago on Wednesday September 14, 2011 | Permalink
  21. That would be great Kevin.

    Thanks!

    Posted 9 years ago on Wednesday September 14, 2011 | Permalink
  22. 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 9 years ago on Wednesday September 14, 2011 | Permalink
  23. Not a problem hanging in there.

    BTW - version 1.6 is really awesome!

    Posted 9 years ago on Thursday September 15, 2011 | Permalink
  24. sascha
    Member

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

    Posted 8 years ago on Wednesday January 11, 2012 | Permalink
  25. 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 8 years ago on Wednesday January 11, 2012 | Permalink
  26. sascha
    Member

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

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