在Tinymce中，您如何获得编辑器中第一行的字体家庭

Question

当前，当编辑器编辑保存的文本时，工具栏字体名称设置为默认为'arial'。然后，当我单击文本的正文时，最终将字体名称更改为"时代新罗马"，这就是字体系列的文本。我猜这是一种正常行为，因为我设置了这样的默认字体：

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

在INIT上，是否有一种方法可以将工具栏字体设置为文本第一行的字体家庭？

Answer 1

弄清楚了。我将所有内容都放在设置函数中，并创建了一种返回元素上的font-font的方法。

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(/wS*/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(/wS*/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);
}