如何添加在TinyMCE的编辑器，一个新的字体？(How to add a new font in

我想add new font在tinymce editor这是在显示font dropdown ，并适用于编辑文本。

我尝试添加TTF字库提前主题皮肤文件夹的字体文件夹中，也可以添加在editor_template.js和添加CSS contect.css为@字体面。

我在字体下拉菜单字体名称。 但是，当我申请到任何文本没有对文本的字体效果。

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

Answer 1:

我解决了这个问题，

检查所有可能存在的问题下面并修复他们在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" ，

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

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

请注意 ，这可能不是在TinyMCE的版本4或更高的工作。 检查新的文件： https://www.tinymce.com/docs/configure/content-formatting/#font_formats

Answer 2:

使用谷歌的字体我已经使用两线（在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黑色和Times New Roman之间将出现

Answer 3:

您需要设置theme_advanced_fonts根据自己的需要配置参数。 如果你需要的字体添加到编辑器IFRAME头contect.css与@font-face才是正道。

Answer 4:

我已经安装了纸莎草字体研究这个解决方案，并且它运作良好（无任何@字体面的任何CSS文件），但与几个浏览器在Mac上研究（运行狮子），我发现，虽然它在Safari中运作良好，火狐，纸莎草选项不会在Chrome中的文本编辑器的字体下拉列表显示出来。 我看到别人都在相关领域有一些Chrome的问题，所以我不知道这是可以解决的Chrome浏览器或没有。

我加入纸莎草纸莎草=在两个.js文件，在相同的相对位置顺序，并加入字体文件夹如所描述的，用字体文件Papyrus.TTF（大写和小写如图所示）。

在Safari和Firefox这导致纸莎草在下拉列表，并严格按照要求纸莎草字体在编辑器中的文本，并在网站页面上。

但不是在Chrome，因为字体无法选择。

文章来源: How to add a new font in tinymce editor?