TinyMCE中的字体族预览

3

我已经初始化了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(第二个例子),它会改变样式,但是如果我使用一个新的字体样式,它不会影响文本,它仍然保持默认样式。重要提示:除了字体预览之外,一切正常。

对于这个问题有什么想法吗?

CI.css 内容:

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

使用自定义字体的jsFiddle示例,感谢skobaljic。


任何控制台警告或错误? - Tarun Lalwani
@TarunLalwani 没有什么问题,字体列表只是不能获取新的样式。如果您选择它们(在编辑器中更改字体样式),它们可以工作,但字体样式的外观是默认的。 - Ignacio Ara
请提供jsFiddle,可以吗? - Navjot Ahuja
你有检查过这个fiddle吗? - skobaljic
正如您在 jsFiddle 中所看到的,自定义字体项目的下拉菜单使用的是字体样式,而不是列出的字体族名称(Indie Flower)。 - Ignacio Ara
@NavjotAhuja skobaljic发布的jsFiddle可能对您有用:https://codepen.io/anon/pen/przvoq - Ignacio Ara
2个回答

3
很抱歉我无法提供任何文档支持,但是如果我们分析@skobalijc提供的codepen,我们可以看到TinyMCE本身由一些直接插入DOM的元素组成,这些元素构成了菜单和UI,以及一个用于内容区域的iframecontent_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。请注意,保留HTML标记。

嗯,这是一个好点,所以你刚刚在TinyMCE编辑器外添加了一个外部CSS <link rel="stylesheet prefetch" href="//fonts.googleapis.com/css?family=Indie+Flower">,我会尝试这个选项。非常感谢。 - Ignacio Ara
1
你仍然需要将它作为 content_css 参数用于内容 iframe,但是绝对没问题。 - Perran Mitchell
1
我已经让它工作了!非常感谢您的建议,我使用了window.parent.$("head").append('<link rel="stylesheet" type="text/css" href="http://www.quiter.com/fonts/' + brandList[i] + '/' + brandList[i] + '.css">');,现在它像魔法一样运行。享受你所赚取的奖励吧 ;) - Ignacio Ara
非常乐意帮忙,非常感谢 :) - Perran Mitchell

1

tinyMCE在字体格式文档中没有明确说明(非常简短且毫无意义)。@skobaljic提到的链接来自于这个问题,你可以注意到即使他们的开发者也使用“草书”(通用字体族)而不是“Indie Flower”。

根据我的经验,tinyMCE只能显示浏览器内置的通用字体或字体系列。

比如在Chrome中:

Agency FB; Aharoni; Algerian; Andalus; Angsana New; AngsanaUPC; Aparajita; Arabic Typesetting; Arial; Arial Black; Arial Narrow; Arial Rounded MT Bold; Baskerville Old Face; Batang; BatangChe; Bauhaus 93; Bell MT; Berlin Sans FB; Berlin Sans FB Demi; Bernard MT Condensed; Blackadder ITC; Bodoni MT; Bodoni MT Black; Bodoni MT Condensed; Bodoni MT Poster Compressed; Book Antiqua; Bookman Old Style; Bookshelf Symbol 7; Bradley Hand ITC; Britannic Bold; Broadway; Browallia New; BrowalliaUPC; Brush Script MT; Calibri; Calibri Light; Californian FB; Calisto MT; Cambria; Cambria Math; Candara; Castellar; Centaur; Century; Century Gothic; Century Schoolbook; Chiller; Colonna MT; Comic Sans MS; Consolas; Constantia; Cooper Black; Copperplate Gothic Bold; Copperplate Gothic Light; Corbel; Cordia New; CordiaUPC; Courier; Courier New; Curlz MT; DaunPenh; David; DilleniaUPC; DokChampa; Dotum; DotumChe; Dubai; Dubai Light; Dubai Medium; Ebrima; Edwardian Script ITC; Elephant; Engravers MT; Eras Bold ITC; Eras Demi ITC; Eras Light ITC; Eras Medium ITC; Estrangelo Edessa; EucrosiaUPC; Euphemia; FangSong; Felix Titling; Fixedsys; Footlight MT Light; Forte; FrankRuehl; Franklin Gothic Book; Franklin Gothic Demi; Franklin Gothic Demi Cond; Franklin Gothic Heavy; Franklin Gothic Medium; Franklin Gothic Medium Cond; FreesiaUPC; Freestyle Script; French Script MT; Gabriola; Gadugi; Garamond; Gautami; Georgia; Gigi; Gill Sans MT; Gill Sans MT Condensed; Gill Sans MT Ext Condensed Bold; Gill Sans Ultra Bold; Gill Sans Ultra Bold Condensed; Gisha; Gloucester MT Extra Condensed; Goudy Old Style; Goudy Stout; Gulim; GulimChe; Gungsuh; GungsuhChe; Haettenschweiler; Harlow Solid Italic; Harrington; High Tower Text; Impact; Imprint MT Shadow; Informal Roman; IrisUPC; Iskoola Pota; JasmineUPC; Jokerman; Juice ITC; KaiTi; Kalinga; Kartika; Khmer UI; KodchiangUPC; Kokila; Kristen ITC; Kunstler Script; Lao UI; Latha; Leelawadee; Levenim MT; LilyUPC; Lucida Bright; Lucida Calligraphy; Lucida Console; Lucida Fax; Lucida Handwriting; Lucida Sans; Lucida Sans Typewriter; Lucida Sans Unicode; MS Gothic; MS Mincho; MS Outlook; MS PGothic; MS PMincho; MS Reference Sans Serif; MS Reference Specialty; MS Sans Serif; MS Serif; MS UI Gothic; MT Extra; MV Boli; Magneto; Maiandra GD; Malgun Gothic; Mangal; Marlett; Matura MT Script Capitals; Meiryo; Meiryo UI; Microsoft Himalaya; Microsoft JhengHei UI; Microsoft New Tai Lue; Microsoft PhagsPa; Microsoft Sans Serif; Microsoft Tai Le; Microsoft Uighur; Microsoft YaHei; Microsoft YaHei UI; Microsoft Yi Baiti; Miriam; Miriam Fixed; Mistral; Modern; Modern No. 20; Mongolian Baiti; Monotype Corsiva; MoolBoran; NSimSun; Narkisim; Niagara Engraved; Niagara Solid; Nirmala UI; Nyala; OCR A Extended; Old English Text MT; Onyx; Palace Script MT; Palatino Linotype; Papyrus; Parchment; Perpetua; Perpetua Titling MT; Plantagenet Cherokee; Playbill; Poor Richard; Pristina; Raavi; Rage Italic; Ravie; Rockwell; Rockwell Condensed; Rockwell Extra Bold; Rod; Roman; Sakkal Majalla; Script; Script MT Bold; Segoe Print; Segoe Script; Segoe UI; Segoe UI Light; Segoe UI Semibold; Segoe UI Semilight; Segoe UI
你可以将任何新字体添加到浏览器中,但效果仅适用于您的计算机或其他支持相同字体的人的浏览器。您的内容显示所有正确的字体的原因是:在tinyMCE呈现其内容后,它输出选项告诉js查找您想要的字体(比如NewFontName,如果提供了content_css,则在content_css中查找该字体),但它本身没有加载您导入的字体。

所以你得到了和我一样的结果,无法将字体家族样式设置为下拉菜单 :(. 感谢您的信息 @MatrixTai - Ignacio Ara
我相信你可以自定义tinyMCE的js,将你想要的字体加载到tinyMCE类中...嗯,我对此有些懒散,因此放弃了。@IgnacioAra - MT-FreeHK
你说的“在tinyMCE类中加载所需字体”是什么意思?我是在初始化时加载*.css文件。谢谢。 - Ignacio Ara
抱歉使用了混淆的措辞,我不应该使用“加载”这个词。tinyMCE只会检查你输入的字体样式是否与浏览器支持的相匹配,而那些不支持的将被丢弃。因此,我猜测(仅仅是猜测),你可以修改tinyMCE的js文件以添加更多支持的字体。 - MT-FreeHK

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接