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

Posted 2023-03-15

【中文标题】如何在 tinymce 编辑器中添加新字体？

【英文标题】：How to add a new font in tinymce editor?

【发布时间】：2013-03-08 02:38:38

【问题描述】：

我想在tinymce editor 中显示add new font，它们在font dropdown 中显示并应用于编辑器文本。

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

我在字体下拉列表中获得了字体名称。但是当我应用于任何文本时，对该文本没有任何字体效果。

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

【参考方案1】：

使用谷歌字体我刚刚使用两行（在 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 之间

【讨论】：

对于 TinyMCE 版本 4 或更高版本，这是正确答案。在此处查看相关文档：tiny.cloud/docs/configure/editor-appearance/#font_formats

【参考方案2】：

我解决了这个问题，

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

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

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

在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

【讨论】：

字体名应该和ttf文件名一样吗？

对于 TinyMCE 版本 4 或更高版本，请参阅此处更新的文档：tiny.cloud/docs/configure/editor-appearance/#font_formats

此文件 editor_template.js 和 editor_template_src.js 位于何处？

【参考方案3】：

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

我在两个 .js 文件中添加了 Papyrus=Papyrus，相对位置顺序相同，并按照说明添加了字体文件夹，字体文件为 Papyrus.TTF（如图所示的大小写）。

在 Safari 和 Firefox 中，这会在下拉菜单中显示 Papyrus，在编辑器文本和网站页面中显示 Papyrus 字体，完全符合要求。

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

【讨论】：

我发现了我犯的一个错误 - 但对它进行研究很有帮助。我没有在两个 .js 文件中的同一位置获得 Papyrus 字体 - 显然 Chrome 对此很敏感，而 Safari / Firefox 则不是。我发现当我将 theme_advanced_fonts: 首选项添加到编辑页面的头部时，以及其他 tinyMCE init 首选项（两个 .js 文件中的行的重复），然后 Chrome 就开始工作了。我意识到我在其中一个 .js 文件中放错了 Papyrus 字体，并进行了纠正，即使删除了 init 指令，所有浏览器都可以正常工作。

我仍然不确定@font-face 会实现什么 - 我想这与编辑器下拉菜单中提供的字体列表无关，而与整体外观有关编辑对话框。我希望这是有用的，不要太混乱！

【参考方案4】：

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

【讨论】：

我已经在配置中添加了 theme_advanced_fonts 并在 content.css 中添加了 @font-face 但是字体 ttf 放在哪里.. 意味着在哪个文件夹中（文件夹的位置）？

我解决了我的问题...字体名称间距问题... "aphrodite pro=aphrodite_pro" 更改为 => "Aphrodite Pro=aphrodite pro"。即使在您的字体名称中有下划线，也不要下划线。用“editor_template.js”文件中的空格替换它。如果不明白请告诉我

明白了。感谢您发布您的答案。您应该将其发布为答案并接受它