如何在tinymce编辑器中添加新字体?

时间:2013-03-19 12:13:36

标签: fonts tinymce font-face

我希望add new font中的tinymce editor显示在font dropdown中,并应用于编辑文字。

我尝试在高级主题皮肤文件夹的fonts文件夹中添加ttf字体,并添加editor_template.js并在contect.css中为@ font-face添加css。

我在字体下拉列表中输入了字体名称。但是当我申请任何文本时,对该文本没有任何字体效果。

我找不到的实际问题是什么。希望这是路径问题或其他......

4 个答案:

答案 0 :(得分:7)

我解决了这个问题,

检查以下所有可能的问题并修复它们以在TinyMCE编辑器中添加字体。

  • 创建字体文件夹:tinymce/themes/advanced/ - 如果不存在。

    1. 将字体放入字体"tinymce/themes/advanced/fonts/aphrodite_pro.ttf.
    2. editor_template.js & editor_template_src.js包含"theme_advanced_fonts"

      中添加字体

      Ex: theme_advanced_fonts: "Aphrodite Pro=aphrodite pro"

  • 在两个js文件的上方维护"theme_advanced_fonts"字体名称序列。

最重要的部分:"Aphrodite Pro"名称由我们定义,其中"aphrodite pro"是字体的名称。

注意这可能不适用于TinyMCE版本4或更高版本。查看新文档:https://www.tinymce.com/docs/configure/content-formatting/#font_formats

答案 1 :(得分:2)

使用Google字体我只使用两行来实现此问题(在TinyMCE初始化中):

content_css: ['https://fonts.googleapis.com/css?family=Gugi'],
font_formats: 'Arial Black=arial black,avant garde;Gugi=Gugi, cursive;Times New Roman=times new roman,times;',

新字体称为Gugi,将出现在arial black和times new roman

之间

答案 2 :(得分:0)

您需要根据需要设置theme_advanced_fonts配置参数。 如果您需要将字体添加到编辑器iframe head contect.css @font-face是正确的方法。

答案 3 :(得分:0)

我已经通过安装Papyrus字体研究了这个解决方案,它运行良好(在任何css文件中没有任何@ font-face),但是在Mac上运行Lion(运行Lion)的几个浏览器进行研究我发现它虽然效果很好在Safari和Firefox中,Papyrus选项不会显示在Chrome的文本编辑器字体下拉列表中。我看到其他人在相关领域遇到了一些Chrome问题,因此我不确定这是否可以在Chrome中修复。

我在两个.js文件中添加了Papyrus = Papyrus,按照相同的相对位置顺序,并添加了所描述的fonts文件夹,字体文件为Papyrus.TTF(如图所示为大写和小写)。

在Safari和Firefox中,这会导致Papyrus出现在下拉列表中,Papyrus字体会出现在编辑器文本中,并且会在网页上完全符合要求。

但由于无法选择字体,因此无法在Chrome中使用。