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?
- 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
heightInitvalue. So if you want to test it you should be able to do so and then confirm my findings by doingconsole.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
wysihtml5according to documentheight. Isn't it? I've worked withwysihtml5in 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
2 Answers
Reset to default 5 +100bootstrap-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
loadevent within thetextarea.wysihtml5configuration 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');
}
}
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744738840a4590908.html
评论列表（0条）