javascript - TinyMCE 中的字体系列预览

Question

我对 tinyMCE 进行了初始化，除了默认字体外，我还在其中添加了新字体:

tinyMCE.init({
  selector: '#htmleditor',
  theme: 'modern',
  width: '100%',
  height: 500,
  fontsize_formats: "4pt 6pt 8pt 10pt 12pt 14pt 18pt 24pt 36pt",
  content_css: ['fonts/CI.css'],
  font_formats: '[*DEFAULTFONTLISTOMITTED*]
  + NewFont1=NewFont1,NewFont1;NewFont2=NewFont2,Impact;NewFont3=NewFont3,NewFont3;',
});

如您所见，新字体的结构是:

NewFontName=NewFontNameClassInCSS,NewFontStyleForList

好吧，如果我放置一个存在的字体系列，例如 Impact(第二个示例)，它会更改样式，但是如果我放置一个 NewFont 样式，它不会影响文本，它只会保留在默认样式中。 重要:除字体预览外一切正常

关于这个问题有什么想法吗？

CI.css 内容:

@font-face {
  font-family: 'NewFontName';
  src: url('NewFontName.ttf') format('truetype');
}

jsFiddle example using custom font谢谢斯科巴尔吉克

Answer 1

不幸的是，我无法用文档来支持这些，但是如果我们剖析@skobalijc 提供的代码笔，我们可以看到 TinyMCE 本身是由一些直接插入到构成菜单的 DOM 中的元素组成的和 UI，以及用于内容区域的 iframe。

content_css: ['//fonts.googleapis.com/css?family=Indie+Flower'], 所做的是将链接添加到内容 iframe 中，因此该 iframe 之外没有任何内容可以访问字体。最简单的修复方法就是添加一个链接到您的字体样式表

<link rel="stylesheet prefetch" href="//fonts.googleapis.com/css?family=Indie+Flower">

进入主文档的头部，并在 TinyMCE 初始化中使用 content_css 参数，如您所见:https://codepen.io/anon/pen/bMwwrG