相对于容器高度的字体大小 - 帮助从vanilla转换为typescript

时间:2017-10-13 18:23:46

标签: javascript jquery angular typescript

我在角度项目中有一个可调整大小的框,其中有一些文本 段落,我需要一种方法来使文本字体大小动态,以便始终填充整个容器。 我在vanilla中找到了一个小例子,但是我无法将它转换为打字稿并使其适用于我的项目。

这是显示我的目的和我想要转换为打字稿的功能的小提琴。

var autoSizeText;

autoSizeText = function() {
  var el, elements, i, len, results;
  elements = $('.resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  results = [];
  for (i = 0, len = elements.length; i < len; i++) {
    el = elements[i];
    results.push((function(el) {
      var resizeText, results1;
      resizeText = function() {
        var elNewFontSize;
        elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';
        return $(el).css('font-size', elNewFontSize);
      };
      results1 = [];
      while (el.scrollHeight > el.offsetHeight) {
        results1.push(resizeText());
      }
      return results1;
    })(el));
  }
  return results;
};

$(document).ready(function() {
  return autoSizeText();
});

https://jsfiddle.net/k0gqhq0s/

知道我将在一个方法上执行它,我可以访问段落元素,里面的文本,它的容器和当前的字体大小。

我的代码是:

  <quill-editor
    #textEditor
    *ngIf="editMode"
    (dblclick)="readOnly = false;"
    [readOnly]="readOnly"
    [attr.draghandler]="readOnly"
    [(ngModel)]="image.text"
    [modules]="editorConfig"
    (onContentChanged)="checkHeightChanges($event, image)"
    theme="bubble"
    style="width: 100%;height: 100%;">

我希望在onContentChanged()事件上执行该autoSizeText方法。

提前致谢。

0 个答案:

没有答案