如何正确地自动调整 wysihtml5 textarea答案

【问题标题】：How to autoresize a wysihtml5 textarea correctly如何正确地自动调整 wysihtml5 textarea
【发布时间】：2016-08-15 23:22:57
【问题描述】：

我正在使用bootstrap-wysihtml5，所以从文本区域输入字段接收输入。为了改善用户体验，我想自动调整文本区域的大小以适应输入文本。

在this Gist 中的代码的帮助下，我可以在单击时调整文本区域的大小，但不能在加载时调整。

这是我当前的实现：

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.composer.iframe);
  var $body = $(this.composer.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);
  });
});

如您所见，height 被评估为 60，这是正确的。但是heightInit 被评估为3860，这是不正确的。我该如何解决这个问题？

【问题讨论】：

你能发布一个你的代码的最小工作示例吗？
嗨@GabyakaG.Petrioli。上面的代码确实有效。它只是给我一个错误的heightInit 值。因此，如果您想对其进行测试，您应该可以这样做，然后通过 console.log(heightInit); 确认我的发现。
我的意思是如果有一个实时页面（jsfiddle.net，codepen.io），所以我们不必创建一个包含所有插件等的完整页面。跨度>
我希望可以。在过去的几个小时里，我一直在尝试创建一个 jfiddle，但我没有技能来设置它，而不会遇到我自己的应用程序没有遇到的各种错误。
您好，根据文档height，我想您的问题适合wysihtml5。不是吗？我在我的项目中使用过wysihtml5。注意这个功能。这些可能会解决您的问题。 $(document).height() 和 $(window).height() 其实我无法完全理解你的问题。

标签： javascript jquery autoresize wysihtml5 bootstrap-wysihtml5

【解决方案1】：

bootstrap-wysihtml5 有一个 events 属性；其中一个事件是load 事件。

要在加载时调整文本区域的大小，您只需在textarea.wysihtml5 配置函数中声明一个load 事件;

见下面的代码：

代码

textarea.wysihtml5({
  ...other properties....,
  "events": {
    "load": function() {
      console.log("Loaded!");
      var $iframe = $(this.composer.iframe);
      var $body = $(this.composer.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);
    }
  }
});

这里是Working Plunker

【讨论】：

【解决方案2】：

Manube 的回答对我不起作用。我不知道为什么。我从$body 和$iframe 获得了控制台日志。但未能设置$body.css 和$iframe.height()。我改为采用document.getElementsByClassName('wysihtml5-sandbox')[0].setAttribute()。然后它起作用了。更改事件的 UX 来自动调整 iframe 的大小并不好。 Manube 的回答对我帮助很大，而且非常简单。谢谢！这是我使用的代码：

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

【讨论】：