在 TinyMCE 中，如何在编辑器中获取第一行的 font-family？答案

【问题标题】：In TinyMCE, how do you get the font-family of the first line in the editor?在 TinyMCE 中，如何在编辑器中获取第一行的 font-family？
【发布时间】：2018-02-26 21:48:50
【问题描述】：

因此，目前，当编辑器编辑保存的文本时，工具栏的 fontName 设置为默认的“Arial”。然后，当我单击文本的正文时，最后它会将 fontName 更改为“Times New Roman”，这就是文本的字体系列。我猜这是正常行为，因为我设置了默认字体名称，如下所示：

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

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

在初始化时，有没有办法将工具栏字体名称设置为文本第一行的字体系列？

【问题讨论】：

标签： javascript reactjs tinymce

【解决方案1】：

想通了。我将所有内容都放在 setup 函数中，并创建了一个在元素上返回 font-family 的方法。

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

【讨论】：