在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);
}