向TinyMCE字体选项添加新字体 [英] Adding new fonts to TinyMCE font options

查看:499
本文介绍了向TinyMCE字体选项添加新字体的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已签出这个主题: Google字型和TinyMCE ,事实上,成功地为用户的TinyMCE字体选项添加了新的字体。



但我不知道这里发生了什么,为什么我不能这样做。我正在尝试添加一个新字体, Samman ,我刚刚从MyFonts.com。



我的TinyMCE初始化,我包括这:

  content_css:css / fonts.css,css / userdesigntool.css,http: /fonts.googleapis.com/css?family=Paytone+One,http://fonts.googleapis.com/css?family=Aclonica,

css / fonts.css 是我描述新字体的地方。在这个文件中,刚刚保存在我的服务器上的 fonts / css 文件夹中的新字体如下所示:

  @ font-face {
font-family:'sammanregular';
src:url('fonts / samman / samman-webfont.eot');
src:url('fonts / samman / samman-webfont.eot?#iefix')format('embedded-opentype'),
url('fonts / samman / samman-webfont.woff') format('woff'),
url('fonts / samman / samman-webfont.ttf')format('truetype'),
url('fonts / samman / samman-webfont.svg#sammanregular ')format('svg');
font-weight:normal;
font-style:normal;

}

我得到了这些产生的Font-Squirrel成功完成以前与其他字体),我已经仔细检查,以确保文件实际上在预期的路径,他们是。



theme_advanced_fonts 条目的TinyMCE初始化,我有这样:

  theme_advanced_fonts:tm_fonts, 
//
以下的一些东西

其中 tm_fonts 是我的javascript中描述的变量,像这样:

  var tm_fonts =Andale Mono = andale mono,times; + 
Arial = arial,helvetica,sans-serif;+
Arial Black = arial black,avant garde;+
Book Antiqua = book_antiquaregular,palatino;+
Corda Light = CordaLight,sans-serif;+
Courier New = courier_newregular,courier;+
Flexo Caps = FlexoCapsDEMORegular;+
Lucida Console = lucida_con ,快递;+
格鲁吉亚= georgia,palatino;+
Helvetica = helvetica;+
影响=影响不定,芝加哥;+
MuseoSlab500Regular,sans-serif;+
Museo Sans = MuseoSans500Regular,sans-serif;+
Oblik Bold = OblikBoldRegular;+
Sofia Pro Light = SofiaProLightRegular;+
Symbol = webfontregular;+
Tahoma = tahoma,arial,helvetica,sans-serif;+
Terminal = terminal,monaco;+
Tikal Sans Medium = tikalSansMediumMedium;+
Times New Roman = times new roman,times;+
Trebuchet MS = trebuchet ms,geneva;+
Verdana = verdana,geneva;
Webdings = webdings;+
Wingdings = wingdings,zapf dingbats+
Aclonica = Aclonica,sans-serif;+
Michroma = Michroma;
Paytone One = Paytone One,sans-serif;+
Andalus = andalusregular,sans-serif;+
Arabic Style = b_arabic_styleregular,sans-serif;+
Andalus = andalusregular,sans-serif;+
KACST_1 = kacstoneregular,sans-serif;+
Mothanna = mothannaregular,sans-serif;+
Nastaliq = irannastaliqregular,sans-serif;+
Samman = sammanregular;;

现在发生的是, Samman 在用户可以在TinyMCE中选择的字体列表中,但选择此字体时,文本没有任何反应,文本只保留在任何现有的字体,它使用。



当我使用浏览器的调试器,确定足够我可以看到TinyMCE的iframe确实包括正确的 css / fonts.css 文件提到Samman。但是当我更改TinyMCE中的字体时,我可以在调试器中看到 span style的 font-family 该文本不变。如果我选择另一种字体, span 样式更改,但如果我选择 Samman ,什么都不会发生。

这是一段时间,因为我添加了字体,所以也许我刚刚忘记了什么?

解决方案

好吧,我发现了问题。



我看到 theme_advanced_fonts 列表中的字体列表的最后一行是:

 Mothanna = mothannaregular,sans-serif;+ 
Nastaliq = irannastaliqregular,sans-serif;+
Samman = sammanregular;,

所有我需要做的是摆脱分号在结尾,罚款:

 Mothanna = mothannaregular,sans-serif;+ 
Nastaliq = irannastaliqregular,sans- serif;+
Samman = sammanregular,


I have checked out this thread: Google Fonts and TinyMCE and have in fact previously even successfully added new fonts to the TinyMCE font options for users.

But I'm not sure what's gone wrong here and why I'm not able to do it any more. I'm trying to add a new font, Samman, which I just got from MyFonts.com.

In my TinyMCE initialization, I include this:

content_css : "css/fonts.css,css/userdesigntool.css,http://fonts.googleapis.com/css?family=Paytone+One,http://fonts.googleapis.com/css?family=Aclonica", 

css/fonts.css is where I've described new fonts. In this file, the new font I just saved in my fonts/css folder on my server is listed like this:

@font-face {
font-family: 'sammanregular';
src: url('fonts/samman/samman-webfont.eot');
src: url('fonts/samman/samman-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/samman/samman-webfont.woff') format('woff'),
     url('fonts/samman/samman-webfont.ttf') format('truetype'),
     url('fonts/samman/samman-webfont.svg#sammanregular') format('svg');
font-weight: normal;
font-style: normal;

}

I got these generated off Font-Squirrel (as I have successfully done previously with other fonts), and I've double-checked to ensure that the files actually are on the expected path, and they are.

In the theme_advanced_fonts entry of the TinyMCE initialization, I have this:

    theme_advanced_fonts : tm_fonts,
            // some more stuff below

Where tm_fonts is a variable described in my javascript like this:

var tm_fonts = "Andale Mono=andale mono,times;"+
                    "Arial=arial,helvetica,sans-serif;"+
                    "Arial Black=arial black,avant garde;"+
                    "Book Antiqua=book_antiquaregular,palatino;"+
                    "Corda Light=CordaLight,sans-serif;"+
                    "Courier New=courier_newregular,courier;"+
                    "Flexo Caps=FlexoCapsDEMORegular;"+                 
                    "Lucida Console=lucida_consoleregular,courier;"+
                    "Georgia=georgia,palatino;"+
                    "Helvetica=helvetica;"+
                    "Impact=impactregular,chicago;"+
                    "Museo Slab=MuseoSlab500Regular,sans-serif;"+                   
                    "Museo Sans=MuseoSans500Regular,sans-serif;"+
                    "Oblik Bold=OblikBoldRegular;"+
                    "Sofia Pro Light=SofiaProLightRegular;"+                    
                    "Symbol=webfontregular;"+
                    "Tahoma=tahoma,arial,helvetica,sans-serif;"+
                    "Terminal=terminal,monaco;"+
                    "Tikal Sans Medium=TikalSansMediumMedium;"+
                    "Times New Roman=times new roman,times;"+
                    "Trebuchet MS=trebuchet ms,geneva;"+
                    "Verdana=verdana,geneva;"+
                    "Webdings=webdings;"+
                    "Wingdings=wingdings,zapf dingbats"+
                    "Aclonica=Aclonica, sans-serif;"+
                    "Michroma=Michroma;"+
                    "Paytone One=Paytone One, sans-serif;"+
                    "Andalus=andalusregular, sans-serif;"+
                    "Arabic Style=b_arabic_styleregular, sans-serif;"+
                    "Andalus=andalusregular, sans-serif;"+
                    "KACST_1=kacstoneregular, sans-serif;"+
                    "Mothanna=mothannaregular, sans-serif;"+
                    "Nastaliq=irannastaliqregular, sans-serif;"+
                    "Samman=sammanregular;";

Now what's happening is that Samman does show up in the list of fonts that the user can choose in TinyMCE, but nothing happens to the text when I select this font, the text just remains on whatever existing font it was using.

When I use the browser's debugger, sure enough I can see that the iframe of TinyMCE does include the right css/fonts.css file that mentions Samman. But when I change the font in TinyMCE, then I can see in the debugger that the span style's font-family for that text isn't changing. If I choose another font, the span style changes, but if I choose Samman, nothing happens.

It's been a while since I added fonts so maybe I've just forgotten something? But I can't seem to figure it out.

解决方案

Okay I discovered the problem.

I saw the last line of the list of fonts in the theme_advanced_fonts list was this:

                "Mothanna=mothannaregular, sans-serif;"+
                "Nastaliq=irannastaliqregular, sans-serif;"+
                "Samman=sammanregular;",

All I had to do was get rid of the semi-colon at the end, so the new font showed up fine with this:

                "Mothanna=mothannaregular, sans-serif;"+
                "Nastaliq=irannastaliqregular, sans-serif;"+
                "Samman=sammanregular",

这篇关于向TinyMCE字体选项添加新字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆