如何正确自动调整 wysihtml5 文本区域的大小
How to autoresize a wysihtml5 textarea correctly
我正在使用bootstrap-wysihtml5,所以从文本区域输入字段接收输入。为了改善用户体验,我想自动调整文本区域的大小以适合输入文本。
在此 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,这是不正确的。我该如何解决这个问题?
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);
}
}
});
这是工作普伦克
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');
}
}
});
相关文章:
- onkeyup无法动态创建多个文本区域
- 具有所有样式的文本正在复制到可编辑文本区域
- 在文本区域POST后解码JSON
- HTML文本区域文本到XML
- 阻止在文本区域/文本框中输入数字
- 使用 javascript 单击图片后更改<文本区域>文本
- 使用 javascript 检测文本区域/文本输入中的 HTML 标记,但它应该支持常见的>和<
- 在按 Tab 键时选择文本区域文本
- 切换文本区域文本,但保留对文本的更改
- 清除文本区域/文本框内容的按钮
- 加载页面时,聚焦并全选文本区域文本
- 如何使可编辑文本区域文本不可选择
- 我的文本区域文本是't用javascript将我想要的样式设置为CSS
- 使用jQuery将文本区域文本安全地存储在隐藏字段中,然后稍后在PHP中使用该文本
- 删除文本区域文本提交在新的选项卡
- 如何在添加新文本时保持文本区域文本静态
- 使用 jQuery 将文本区域文本设置为格式正确的 HTML 代码
- 为什么文本添加到区域文本是通过页面刷新,而不是直接刷新
- 使用 jquery 修改文本区域文本
- 如何使用Javascript在文本区域(文本框)中单击(光标闪烁)而不使用鼠标单击