在TinyMCE中，如何在编辑器中获取第一行的字体系列？

Question

因此，当前，当编辑器编辑保存的文本时，工具栏的fontName设置为默认的“ Arial”。 然后，当我单击文本的正文时，最后它将fontName更改为“ Times New Roman”，这是文本的字体家族。 我猜这是正常现象，因为我这样设置默认的fontName：

const defaultFont = this.props.defaultFont;
const defaultFontSize = this.props.defaultFontSize;

editor.on('init', function () {
  editor.execCommand('fontName', false, defaultFont);
  editor.execCommand('fontSize', false, defaultFontSize);
});

在初始化时，是否可以将工具栏fontName设置为文本第一行的字体系列？

Answer 1

弄清楚了。 我将所有内容都放入设置函数中，并创建了一个在元素上返回字体家族的方法。

getFontFam(elm, property, toolbarFontElm) {
const list = elm.firstElementChild.firstElementChild;
if (list) {
  const fontRaw = window.getComputedStyle(list, null).getPropertyValue(property).split(',')[0].replace(/['"]+/g, '');
  const fontUsed = fontRaw.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});;

  toolbarFontElm.innerText = fontUsed;
  return fontUsed;
}
const fontRaw = window.getComputedStyle(elm, null).getPropertyValue(property).split(',')[0].replace(/['"]+/g, '');
const fontUsed = fontRaw.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});;

toolbarFontElm.innerText = fontUsed;
return fontUsed;
}

和配置：

setup: (editor) => {
  // Set default font
  setTimeout(() => {
    const defaultFontSize = this.props.defaultFontSize;
    const iframe = document.getElementById(editor.iframeElement.id);
    const innerDoc = iframe.contentDocument.getElementById('tinymce');
    const toolbarFontElm = document.getElementsByClassName('mce-txt')[0];
    const defaultFont = this.getFontFam(innerDoc, 'font-family', toolbarFontElm);

    editor.on('init', function () {
      editor.execCommand('fontName', false, defaultFont);
      editor.execCommand('fontSize', false, defaultFontSize);
    });
  }, 10);
}