0

I'm trying to use jWYSIWYG and autoGrow together so that the textarea in the jWYSIWYG editor expands as you type. Either jWYSIWYG works or autoGrow works, but not both together. I'm pretty new to jQuery, so would appreciate hearing what I'm doing wrong here.

  <script type="text/javascript">
  $(function(){
    $('#wysiwyg').autoGrow();
  });

  $(function()
    {
      $('#wysiwyg').wysiwyg();
  });
  </script>
  <script type="text/javascript">
</script>
</head>

<body>
  <h1>jWYSIWYG</h1>
  <h2>Example: Basic</h2>
  <div>
    <textarea name="wysiwyg" id="wysiwyg" rows="5" cols="40" style="overflow: hidden; height: auto; width: 350px"></textarea>
Josh Smith
  • 14,674
  • 18
  • 72
  • 118
  • I don't think you're doing anything wrong, instead the script's events are interfering with eachother. I assume they both listen for keyup events to perform some actions which is where the errors occur. – Marko Aug 08 '10 at 22:13
  • Marko, thanks for the comment. As I said, I'm a complete noob to jQuery (have basically been hacking this together using CSS and hoping the rest will come). Is there any way to make these work together even though those events are currently conflicting? – Josh Smith Aug 08 '10 at 22:17
  • I've tried searching for information about onkeyup conflicts and no joy. Would appreciate any further thoughts. – Josh Smith Aug 08 '10 at 22:26
  • I don't seem to be. I checked Error Console in Firefox, though I don't know of any other way to check off the top of my head. – Josh Smith Aug 08 '10 at 22:35
  • Ahh I see what the problem is, th wysiwyg script hides the textarea and instead displays the content inside an iframe. I've tried binding the keyup event to the iframe but that's not gonna work :/ – Marko Aug 08 '10 at 23:03
  • Could it actually have anything to do with the fact that it's creating an iframe? The output yields a `
    ` with an `
     – Josh Smith Aug 08 '10 at 23:06
  • Aha. Didn't reload the page and we found the same issue. Any other ideas on how to deal with this? I'd looked into multiple auto-resize plugins but I'm not sure if any will work here. `jWYISIWYG` also uses the jQuery UI resizer, but I want dynamic resizing. – Josh Smith Aug 08 '10 at 23:08
  • Hmm sorry I can't really help.. I'd post on the plugins forum and ask how other events can be bound to the textarea.. – Marko Aug 08 '10 at 23:19
  • Thanks. There does seem to be an API but I'm not sure how to use it: http://wiki.github.com/akzhan/jwysiwyg/ – Josh Smith Aug 09 '10 at 00:39

2 Answers2

2

$(document).ready(function() {

$('#wysiwyg').wysiwyg({ autoGrow: true, maxHeight: 600, });

});

Rashmi
  • 41
  • 5
1

Hi Josh and hi everyone, I am the author of the Autogrow plugin. ;-) Well, Marko is right here. This is a case of conflicting scripts. Both plugins are using the same events.

The thing to do in this case would be to merge the two scripts (contact the authors first), but this can be quite a challenge.

SoupeChinoise
  • 108
  • 2
  • 6
  • Jevin, thanks for answering. I'd love if you'd be able to see whether you can merge your plugin with jWYSIWYG. I'm simply too new to jQuery to work that kind of magic myself. Maybe in a few weeks I'll try tackling it again. I think Autogrow would work great with the jWYSIWYG plugin. I raised the issue on jWYSIWYG's git http://github.com/akzhan/jwysiwyg/issues#issue/21. But it'd be fantastic if you could work something out yourself. Let me know what you think. – Josh Smith Aug 12 '10 at 06:13
  • Jevin, maybe it's just an aesthetic thing for me, but I've also noticed that autoGrow looks better if you're using `onkeyup` or `onkeypress` rather than `onkeydown`. – Josh Smith Aug 12 '10 at 21:41