javascript TinyMCE：工具栏图标未出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20971537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TinyMCE : Toolbar icons not appearing
提问by saylee
I was exploring tiny mce editor for one of my project and what I found out was the Icons in the tool bar are not appearing. It is showing some unicode which the browser is unable to display. Here is the html code for the page:
我正在为我的一个项目探索微型 mce 编辑器，我发现工具栏中的图标没有出现。它显示了一些浏览器无法显示的 unicode。这是页面的html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ht/loose.dtd">
<html>
<head>
<title>HTML</title>
<script type="text/javascript" src="../js/tinymce/tinymce.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
],
toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
menubar: false,
toolbar_items_size: 'small',
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});</script>
</head>
<body>
<form method="post" action="somepage">
<textarea name="content" style="width:100%"></textarea>
</form>
</body>
</html>
On the other hand if I replace the script with
另一方面，如果我用
<script type="text/javascript" src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
I am able to see all icons perfectly. I have added all the contents of js in the tinymce download into my web project in the js folder. Does anyone have a clue about this issue?
我能够完美地看到所有图标。我已经将tinymce下载中js的所有内容添加到我的web项目中的js文件夹中。有没有人有关于这个问题的线索？
采纳答案by saylee
Okay I got this one working.
好的，我让这个工作了。
After carefully analyzing the console error, I found out that it was an issue of tinymce font which was not getting downloaded.
在仔细分析控制台错误后，我发现这是tinymce字体没有下载的问题。
It was basically the issue of Mozilla Firefox's security.fileuri.strict_origin_policy property which needed to be changed to false to relax the origin restriction. Now I am able to see those icons perfectly.
这基本上是 Mozilla Firefox 的 security.fileuri.strict_origin_policy 属性的问题，需要将其更改为 false 以放宽来源限制。现在我可以完美地看到这些图标了。
回答by Shuhaib V
don't place the js folder too far outside outside.....
不要把js文件夹放在外面太远.....
problem solved when the referring folder(tinymce) placed together with the html(or whatever it may be) file...
当引用文件夹（tinymce）与 html（或其他任何文件）文件放在一起时问题解决了...
回答by Christophe Le Besnerais
To whoever will have the same problem in the future : also check that your .htaccess doesn't block the following extensions :
对于将来会遇到相同问题的任何人：还要检查您的 .htaccess 是否不会阻止以下扩展名：
.eot .svg .ttf .woff
.eot .svg .ttf .woff
回答by Steve Krew
I had the same problem and the .htaccess & other stuff don't worked for me....
我遇到了同样的问题，.htaccess 和其他东西对我不起作用....
...finally i found out that i have declaired
...最后我发现我已经声明了
*{ font-family: fonts,fonts,fonts, sans-serif !important; }
i found out that the
我发现
"!important"
“！重要的”
breaks my css all after the @font-face will be ignored.
在@font-face 将被忽略后，我的 css 全部中断。
in my special case it doesn't show the icons of tinymce and after i removed the !important everything works fine.
在我的特殊情况下，它不显示 tinymce 的图标，并且在我删除 !important 后一切正常。
so check your general css settings first :)
所以首先检查你的一般 css 设置:)
hope this help
希望这有帮助
回答by Christophe Le Besnerais
To whoever will have the same problem in the future, episode 2 (see my previous answer above for episode 1) :
对于将来会遇到同样问题的人，第 2 集（请参阅我之前对第 1 集的回答）：
there is an option in the browser (at least in firefox) to block fonts from being downloaded. Someone messed with this option, and the icons in the toolbar were not displayed correctly ...
浏览器中有一个选项（至少在 Firefox 中）可以阻止下载字体。有人把这个选项弄乱了，工具栏中的图标显示不正确...
Oh tinymce, how many hours will I lost because of your icons not showing :(
哦，tinymce，我会因为你的图标不显示而损失多少小时:(
回答by John
If it helps anyone, I was using TinyMCE with my HTML/PHP and using Bootstrap 3. The div with row and container-fluid was making my icons not appear.
如果它对任何人有帮助，我将 TinyMCE 与我的 HTML/PHP 和 Bootstrap 3 一起使用。带有 row 和 container-fluid 的 div 使我的图标不出现。
<!DOCTYPE html>
<title>Level 1 page</title>
<script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: 'textarea.tinymce',
branding: false,
menubar: false,
plugins: "lists link hr visualblocks table paste textcolor colorpicker",
toolbar: "undo redo | styleselect fontsizeselect | " +
"bold italic underline | forecolor backcolor | " +
"alignleft aligncenter alignright alignjustify | " +
"bullist numlist | outdent indent | " +
"table | link unlink | visualblocks",
height: 300,
resize: false
});
</script>
*<div class="row container-fluid">*
<?php include 'navbar_others.php'; ?>
<div class="col-md-12" id="others-div-below-buttons">
<div id="response"></div>
<div id="live_data"></div>
</div>
*</div>*
回答by Vishal Sharma
Tinymce 4 Uses Content Property Of CSS to render toolbar icons
Tinymce 4 使用 CSS 的 Content 属性来渲染工具栏图标
sitepoint Content Property| CSS Tricks Content Description
so any browser that supports content property you 'll able to see that
所以任何支持内容属性的浏览器都可以看到
Note: IE8 only supports the content property if a !DOCTYPE is specified.(ref. w3schools)
注意：IE8 仅在指定了 !DOCTYPE 时才支持 content 属性。（参考 w3schools）
