Chr*_*sen 1 javascript jquery autoresize wysihtml5 bootstrap-wysihtml5
我正在使用bootstrap-wysihtml5,因此从textarea输入字段接收输入.为了改善用户体验,我想自动调整textarea以适应输入文本.
在这个Gist中的代码的帮助下,我可以在单击时调整textarea的大小,但不能在加载时调整大小.
这是我目前的实施:
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,这是不正确的.我该如何解决？
bootstrap-wysihtml5有一个events属性; 其中一个事件是load事件.
要在加载时调整textarea的大小,您需要做的就是在配置函数中声明一个
load事件textarea.wysihtml5;
见下面的代码:
码
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);
}
}
});