将 Arial Unicode MS 添加到 CKEditor

Posted 2023-03-15

【中文标题】将 Arial Unicode MS 添加到 CKEditor

【英文标题】：Adding Arial Unicode MS to CKEditor

【发布时间】：2015-08-11 02:57:23

【问题描述】：

我的网络应用程序允许用户在 CKEditor 中编写富文本，然后使用 Flying Saucer 库将结果导出为 PDF。

由于他们需要编写希腊字符，我选择将 Arial Unicode MS 添加到可用字体中，方法是执行以下操作：

config.font_names = "*several fonts...*; Arial Unicode MS/Arial Unicode MS, serif";

这个字体现在可以在 CKEditor 菜单中正确显示，但是当我将此字体应用到任何元素时，我会得到以下结果：

<span style="font-family:arial unicode ms,serif;"> some text </span>

如您所见，我丢失了大写字符。这在 PDF 导出过程中效果很差，因为飞碟无法识别字体，因此使用不支持 Unicode 字符的 Helvetica，因此希腊字符不会显示在 PDF 中。

如果我从代码源手动更改

<span style="font-family:arial unicode ms,serif;"> some text </span>

到

<span style="font-family:Arial Unicode MS,serif;"> some text </span>

然后它按预期工作，显示希腊字符。

以前有人遇到过这个问题吗？有没有办法避免将大写字符更改为小写？ 我真的很想避免做任何类型的后处理，比如：

htmlString = htmlString.replace("arial unicode ms", "Arial Unicode MS");

【问题讨论】：

这个问题是一个已知的（和旧的）CKEditor 错误，请参阅 dev.ckeditor.com/ticket/5966 和 dev.ckeditor.com/ticket/10676

【参考方案1】：

除了飞碟 R8 之外，我同意您关于解决此问题的看法。 虽然取决于您的工作流程，但允许 CKEditor 预处理和验证已完成的 HTML 编码文件（首先将整个文档渲染为 HTML）会更有效吗？

CKEditor 支持票证均未指定问题的真正来源，因此我建议您自己确认是 (A) 样式问题，或 (B) CSS 处理问题，或 (C) 特殊的 CKEditor 解析问题。

一种可能的解决方法： 复制所需的 unicode 字体并将其导入 Type 3.2（适用于 Mac 和 Windows）。

http://www.cr8software.net/type.html

将重复的字体集重命名为全部小写。

限制你的字体选择

config.font_names = "customfontnamehere";

单独应用样式（下面的 unicode 字体 greatvibes），看看是否能给你想要的结果：

var s = CKEDITOR.document.$.createElement( 'style' );
s.type = 'text/css';
cardElement.$.appendChild( s );

s.styleSheet.cssText =
'@font-face ' +
'font-family: \'GreatVibes\';' +
'src: url(\'' + path +'fonts/GreatVibes-Regular.eot\');' +
'' +
style;

如果上述方法不起作用，您可以尝试修改 xmas plugin.js（也使用 unicode 字体 greatvibes 并在输出之前进行各种酷操作），因此可能值得尝试修改它而不是开始从头开始：

'<style type="text/css">' +
'@font-face ' +
'font-family: "GreatVibes";' +
'src: url("' + path +'fonts/GreatVibes-Regular.ttf");' +
'' +
style +
'</style>' )

无论您尝试哪种方法，目标都是测试各种样式并查看 CKEditor 是否再次默认回到 Helvetica。

最后，CKEditor SDK 有很好的支持，所以如果你有时间和精力，你可以写一个插件。我知道这听起来令人生畏，但请注意 /plugins/font 目录中的 plugin.js 如何优先考虑大小属性。

如果您对制作自己的插件不感兴趣，我建议您联系多产的 ckeditor 插件编写者

doksoft

（在他们的网站和他自己的网站上都列出）并要求演示他的商业插件“CKEditor Special Symbols”，它具有广泛的 unicode 功能。 希望有帮助， 克莱尔W

【参考方案2】：

我没有找到使用 Flying Saucer R8 的任何方法，但您可以使用 Flying Saucer R9 使其工作。

方法 ITextResolver.addFont(String path, String fontFamilyNameOverride, String encoding, boolean embedded, String pathToPFB) 允许您添加具有特定名称的喜爱。

代码示例：

  ITextRenderer renderer = new ITextRenderer();
  // Adding fonts
  renderer.getFontResolver().addFont("fonts/ARIALUNI.TTF", "arial unicode ms", BaseFont.IDENTITY_H, BaseFont.EMBEDDED, null);
  renderer.getFontResolver().addFont("fonts/ARIALUNI.TTF", "Arial Unicode MS", BaseFont.IDENTITY_H, BaseFont.EMBEDDED, null);

  String inputFile = "test.html";
  renderer.setDocument(new File(inputFile));
  renderer.layout();

  String outputFile = "test.pdf";
  OutputStream os = new FileOutputStream(outputFile);
  renderer.createPDF(os);
  os.close();

您可以在Maven 找到飞碟 R9。

【讨论】：

感谢您指出该解决方案。我实际上不想更改飞碟版本，并且正在寻找 CKEditor 解决方案，以便正确保存字体。

【参考方案3】：

最简单的解决方案（直到 CKEditor 修复该错误）是进行后处理。

您可以在服务器上执行此操作（非常简单，您已经拥有代码）或使用一个小的 CKEditor 插件，但这将为您提供所需的解决方案，除非您需要添加更多字体，否则无需任何进一步的变化。