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

Question

我希望add new font在tinymce editor其中显示font dropdown并应用于编辑器文本.

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

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

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

Answer 1

我解决了这个问题,

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

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

  1. 将字体放入字体中 "tinymce/themes/advanced/fonts/aphrodite_pro.ttf.

  2. 在editor_template.js & editor_template_src.jsinclude中添加字体"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

使用 Google Fonts 我刚刚使用两行（在 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 之间

Answer 3

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