admin管理员组

文章数量:1394099

I am using bootstrap-wysihtml5 so receive input from a textarea input field. To improve the user experience I want to autoresize the textarea to fit the input text.

With help from the code in this Gist I am able to resize the textarea when clicked, but not on load.

Here is my current implementation:

var container = $("#container");
var textarea = $("<textarea />");
textarea.attr("style", "width: 90%;");

container.append(textarea);

textarea.wysihtml5({
  "font-styles": false,
  "emphasis": false,
  "lists": false,
  "html": false,
  "link": false,
  "image": false,
  "color": false
});

textarea.val("<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div<div><br></div><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..</div");

textarea.observe("load", function () {     
  var $iframe = $(thisposer.iframe);
  var $body = $(thisposer.element);    // <body marginwidth="0" marginheight="0" contenteditable="true" class="wysihtml5-editor" spellcheck="true" style="color: rgb(85, 85, 85); cursor: auto; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px; min-height: 0px; overflow: hidden; background-color: rgb(255, 255, 255);"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br></div><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..</div></body>

  $body.css({
    'min-height': 0,
    'line-height': '20px',
    'overflow': 'hidden',
  })

  var scrollHeightInit = $body[0].scrollHeight;                // 3860
  var bodyHeightInit = $body.height();                         // 3860
  var heightInit = Math.min(scrollHeightInit, bodyHeightInit); // 3860
  $iframe.height(heightInit);

  $body.bind('keypress keyup keydown paste change focus blur', function(e) {
    var scrollHeight = $body[0].scrollHeight;        // 150
    var bodyHeight = $body.height();                 // 60
    var height = Math.min(scrollHeight, bodyHeight); // 60
    $iframe.height(height);
  });
});

As you can see height is evaluated to 60, which is correct. But heightInit is evaluated to 3860, which is not correct. How do I fix this?

I am using bootstrap-wysihtml5 so receive input from a textarea input field. To improve the user experience I want to autoresize the textarea to fit the input text.

With help from the code in this Gist I am able to resize the textarea when clicked, but not on load.

Here is my current implementation:

var container = $("#container");
var textarea = $("<textarea />");
textarea.attr("style", "width: 90%;");

container.append(textarea);

textarea.wysihtml5({
  "font-styles": false,
  "emphasis": false,
  "lists": false,
  "html": false,
  "link": false,
  "image": false,
  "color": false
});

textarea.val("<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div<div><br></div><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..</div");

textarea.observe("load", function () {     
  var $iframe = $(this.poser.iframe);
  var $body = $(this.poser.element);    // <body marginwidth="0" marginheight="0" contenteditable="true" class="wysihtml5-editor" spellcheck="true" style="color: rgb(85, 85, 85); cursor: auto; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px; min-height: 0px; overflow: hidden; background-color: rgb(255, 255, 255);"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br></div><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..</div></body>

  $body.css({
    'min-height': 0,
    'line-height': '20px',
    'overflow': 'hidden',
  })

  var scrollHeightInit = $body[0].scrollHeight;                // 3860
  var bodyHeightInit = $body.height();                         // 3860
  var heightInit = Math.min(scrollHeightInit, bodyHeightInit); // 3860
  $iframe.height(heightInit);

  $body.bind('keypress keyup keydown paste change focus blur', function(e) {
    var scrollHeight = $body[0].scrollHeight;        // 150
    var bodyHeight = $body.height();                 // 60
    var height = Math.min(scrollHeight, bodyHeight); // 60
    $iframe.height(height);
  });
});

As you can see height is evaluated to 60, which is correct. But heightInit is evaluated to 3860, which is not correct. How do I fix this?

  • javascript
  • jquery
  • autoresize
  • wysihtml5
  • bootstrap-wysihtml5
Share Improve this question edited Mar 11, 2015 at 16:13 Cjoerg asked Mar 9, 2015 at 9:27 CjoergCjoerg 1,3253 gold badges25 silver badges72 bronze badges 6
  • can you post a minimal working example of your code ? – Gabriele Petrioli Commented Mar 11, 2015 at 16:32
  • Hi @GabyakaG.Petrioli. The above code does work. It just give me a wrong heightInit value. So if you want to test it you should be able to do so and then confirm my findings by doing console.log(heightInit);. – Cjoerg Commented Mar 11, 2015 at 16:44
  • I meant if there is a live page (jsfiddle, codepen.io) so we do not have to create a full page with all plugins etc.. – Gabriele Petrioli Commented Mar 11, 2015 at 16:49
  • I wish I could. I've tried for the last few hours to create a jfiddle, but I don't have the skills to set it up without getting all sorts of errors that I'm not getting on me own app. – Cjoerg Commented Mar 11, 2015 at 20:10
  • Hello, I guess your problem is fitting wysihtml5 according to document height. Isn't it? I've worked with wysihtml5 in my project. Note this functions. These may be solve your issue. $(document).height() and $(window).height() Actually I couldn't fully understand your problem. – efkan Commented Mar 15, 2015 at 10:29
 |  Show 1 more ment

2 Answers 2

Reset to default 5 +100

bootstrap-wysihtml5 has an events property; one of these events is the load event.

To resize the textarea on load, all you need to do is declare a load event within the textarea.wysihtml5 configuration function;

See code below:

Code

textarea.wysihtml5({
  ...other properties....,
  "events": {
    "load": function() {
      console.log("Loaded!");
      var $iframe = $(this.poser.iframe);
      var $body = $(this.poser.element);
      $body.css({
        'min-height': 0,
        'line-height': '20px',
        'overflow': 'hidden',
      });
      var scrollHeightInit = $body[0].scrollHeight;
      console.log("scrollHeightInit", scrollHeightInit);
      var bodyHeightInit = $body.height();
      console.log("bodyHeightInit", bodyHeightInit);
      var heightInit = Math.min(scrollHeightInit, bodyHeightInit);
      $iframe.height(heightInit);
    }
  }
});

Here is Working Plunker

Manube's answer doesn't work for me. I don't know why. I got the console log from $body and $iframe. But failed to set $body.css and $iframe.height(). I adopted document.getElementsByClassName('wysihtml5-sandbox')[0].setAttribute() instead. Then it worked. The change event's UX to auto resize iframe is not good though. Manube's answer helped me a lot and it is very simple. Thank you! Here is the code I used:

$('#edit').wysihtml5({
    toolbar:{ "fa": true, "image": false, "html": false },
    locale: 'zh-TW',
    name: 't-iframe',
    events: {
        load: function(){
            var $body = $(this.poser.element);
            var $iframe = $(this.poser.iframe);
            iframeh = Math.max($body[0].scrollHeight, $body.height()) + 100;
            document.getElementsByClassName('wysihtml5-sandbox')[0].setAttribute('style','height: ' + iframeh +'px !important');
},change: function(){
            var $abody = $(this.poser.element);
            var $aiframe = $(this.poser.iframe);
            aiframeh = Math.max($abody[0].scrollHeight, $abody.height()) + 100;
            document.getElementsByClassName('wysihtml5-sandbox')[0].setAttribute('style','height: ' + aiframeh +'px !important');
        }
    }
});

本文标签： javascriptHow to autoresize a wysihtml5 textarea correctlyStack Overflow

版权声明：本文标题：javascript - How to autoresize a wysihtml5 textarea correctly - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744738839a2622490.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。