TinyMCE 4 在 IE9 中不显示工具栏图标（任何模式）答案

【问题标题】：TinyMCE 4 not showing toolbar icons in IE9 (any mode)TinyMCE 4 在 IE9 中不显示工具栏图标（任何模式）
【发布时间】：2013-09-28 03:00:29
【问题描述】：

TinyMCE 有这个易于使用的代码，但我在 IE9 中看不到工具栏图标（imgs 似乎无法加载）。

<html>
      <head><!-- CDN hosted by Cachefly -->
         <script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
         <script>        tinymce.init({selector:'textarea'});</script>
      </head>
      <body>
            <textarea>Your content here.</textarea>
      </body>
</html>

我看过这个类似的帖子 (tinymce icons in internet explorer)，但建议对我没有任何影响。

我尝试将浏览器置于不同的模式，但没有任何效果。我唯一一次看到它在 IE 中工作是在 EditPlus 嵌入式浏览器中，但我不知道它到底是什么。

在 Chrome 中运行良好。

EDIT- 直接加载文件时在 IE 中工作，例如。 C:\inetpub\wwwroot\tiny.html

谢谢。

【问题讨论】：

“imgs 似乎无法加载”。您是否在 javascript 控制台中看到有关它的消息？
@GlenSwift 在控制台中什么都没有，我什至找不到应该在 F12 中指定 imgs 的位置，只是像这样的标记，没有在样式中指定图像

标签： javascript internet-explorer tinymce tinymce-4

【解决方案1】：

要检查 IE 的一件事是字体下载安全设置。如果设置设置为“禁用”，则不会显示 Web 字体图标，因为无法下载字体。可以通过单击 Internet 选项对话框的安全选项卡上的自定义级别...按钮来找到该设置，该对话框可以在工具 > Internet 选项下访问。

【讨论】：

就是这样 - 不知道 IE11 的默认设置是什么，但这就是问题所在。谢谢

【解决方案2】：

TinyMCE 4 使用包含所有图标的网络字体。确保它们被加载，并且在加载带有标题 Access-Control-Allow-Origin: * 的字体时允许跨域。

【讨论】：

听起来很有希望，我将该标头添加到我的 ASPX 页面的响应中（并验证它可以到达浏览器），但它没有任何区别，我发现根本没有请求 eot 文件。而当我从文件系统加载页面时，它确实请求了eot。也许这只是tinymce中的一个错误。

【解决方案3】：

当我检查工具栏图标时：我发现它们是网络字体

<i class="mce-ico mce-i-bold"></i>

like this 代表粗体。这意味着正如正确所说，TINYMCE 正在为工具栏使用网络字体，而这些字体没有显示出来。

有些问题在 IE 9 和以前版本的 chrome 上回答了相同的问题。这是链接

Fontawesome Icons not working on IE9 and Chrome

上面写着：

对于下面给出的示例，假设文档位于http://example.com/page.html，并且所有 URL 链接都指向用户代理支持的有效字体资源。将加载使用以下“src”描述符值定义的字体：

/* same origin (i.e. domain, scheme, port match document) */
src: url(fonts/simple.woff);

/* data url's with no redirects are treated as same origin */
src: url("data:application/font-woff;base64,...");

/* cross origin, different domain */
/* Access-Control-Allow-Origin response header set to '*' */
src: url(http://another.example.com/fonts/simple.woff);

使用以下“src”描述符值定义的字体将无法加载：

 /* cross origin, different scheme */
 /* no Access-Control-xxx headers in response */
 src: url(https://example.com/fonts/simple.woff);

/* cross origin, different domain */
/* no Access-Control-xxx headers in response */
src: url(http://another.example.com/fonts/simple.woff);

正如在 github https://github.com/tinymce/tinymce/tree/master/js/tinymce/skins/lightgray/fonts 上看到的，他们使用的是 icomoon 字体。因此，下载这些并在您自己的服务器上使用。希望它能解决目的。

【讨论】：