Jquery：使用可调整大小的UI插件增加或减少文本的字体大小

我正在使用UI插件。我在可调整大小的元素中有一个contenteditable div

我希望增加调整大小时contenteditable div的fontsize增大，减少调整大小时fontsize减小。基本上，我希望文本在调整大小时最适合contenteditable div

检查JSFIDLE

代码：

$(".resizeable").resizable({
                containment: "#background",
                minHeight:   120,
                maxHeight:   350,
                maxWidth:    550,
                minWidth:    220,
                resize: function(event, ui) {
                    resizeText(1);
                }
            });

            function resizeText(multiplier) {
                var textarea = $("#message"); 
                var fs = (parseFloat(textarea.css('font-size')) + multiplier).toString() + 'px';    // Increment fontsize
                var text = textarea.val();                                                          // Firefox won't clone val() content (wierd..)
                textarea.css({'font-size':fs}).replaceWith( textarea.clone().val(text) );           // Replace textarea w/ clone of itself to overcome line-height bug in IE
            }

---

当我增加大小时，“输入消息”字体大小将增加。但当我减少它不是减少。我怎样才能做到这一点

此小部件有一个名为的事件。你可以倾听这一事件并实现你想要的

例如：

试试这个：

---

$（“.selector”）。可调整大小（{alsoResize:#text}）

如何知道元素是增加了还是减少了？我想增加或减少文本的字体大小。你能给点提示吗？这个事件是在调整大小的过程中触发的，所以不管它是增加还是减少，只要你把字体大小设置为ui的一个因素。sizeI真的很欣赏你的回复。我是JS的新手，所以不太清楚。你能给我举个例子吗？这正是我想要的！！谢谢：）你能给我举个例子吗？alsoResize-一个或多个元素与可调整大小的元素同步调整大小。我希望元素的fontsize也能调整大小（增加/减少字体大小），在上面的链接中，输入一些东西，比如说“JSFIDLE”。当我增加字号时，“JSFIDLE”的字号是固定的，而不是增加。当我减小字体大小时，字体大小应该减小。我需要这种功能。

$("#contenteditable").resizable({
  resize: function(event, ui) {
    // handle fontsize here
    console.log(ui.size); // gives you the current size of the div
    var size = ui.size;
    // something like this change the values according to your requirements
    $(this).css("font-size", (size.width * size.height)/1000 + "px"); 
  }
});