Javascript TinyMCE：工具栏图标不显示
我正在为我的一个项目探索微型mce编辑器，我发现工具栏中的图标没有出现。它显示浏览器无法显示的某些unicode。以下是页面的html代码：Javascript TinyMCE：工具栏图标不显示,javascript,tinymce,tinymce-4,Javascript,Tinymce,Tinymce 4,我正在为我的一个项目探索微型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
<!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>
HTML
tinymce.init({
选择器：“文本区域”，
插件：[
“advlist autolink autosave link image list charmap打印预览hr锚定页面中断拼写检查器”，
“searchreplace wordcount visualblocks visualchars代码全屏插入日期时间媒体非中断”，
“表格上下文菜单方向性表情模板文本颜色粘贴整页文本颜色”
],
工具栏1：“新建文档全页|粗体斜体下划线删除线|左对齐中心对齐右对齐对齐对齐|样式选择格式选择字体选择字体大小选择”，
工具栏2：“剪切复制粘贴|搜索替换| bullist numlist | outdent缩进块报价|撤消重做|链接取消链接锚定图像媒体代码|插入时间预览|前景色背景色”，
工具栏3：“表格| hr removeformat |下标上标| charmap表情符号|全屏打印| ltr rtl |拼写检查器| visualchars visualblocks非破坏性模板pagebreak restoredraft”，
梅努巴：错，
工具栏项目大小：“小”，
样式和格式：[
{标题：“粗体文本”，内联：“b'}，
{标题：'Red text'，内联：'span'，样式：{color:'#ff0000'}}，
{title:'Red header'，block:'h1'，style:{color:'#ff0000'}}，
{title:'example1'，inline:'span'，classes:'example1'}，
{title:'example2'，inline:'span'，classes:'example2'}，
{title:'表格样式'}，
{title:'Table row 1'，选择器：'tr'，类：'tablerow 1'}
],
模板：[
{标题：'测试模板1'，内容：'测试1'}，
{标题：'测试模板2'，内容：'测试2'}
]
});
<script type="text/javascript" src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
我能够完美地看到所有图标。我已经将tinymce下载中的所有js内容添加到了js文件夹中的web项目中。有人知道这个问题吗？Tinymce 4使用CSS的内容属性来呈现工具栏图标 | 因此，任何支持内容属性的浏览器都可以看到这一点
注意：IE8仅在以下情况下支持content属性！已指定DOCTYPE。（参考w3schools）好的，我已经让这个正常工作了 在仔细分析控制台错误后，我发现这是tinymce字体的问题，无法下载
这基本上是Mozilla Firefox的security.fileuri.strict_origin_策略属性的问题，需要将该属性更改为false以放宽源限制。现在我可以完美地看到这些图标了。不要将js文件夹放在太远的外面
当将引用文件夹（tinymce）与html（或任何可能的）文件放在一起时，问题已解决…给将来会遇到相同问题的人：还要检查.htaccess是否阻止以下扩展名： .eot .svg .ttf
.woff我也有同样的问题，.htaccess和其他东西对我不起作用 …最后我发现我已经说过了
*{ font-family: fonts,fonts,fonts, sans-serif !important; }
希望这对将来有同样问题的人有所帮助，第二集（第1集见我前面的答案）： 浏览器中（至少在firefox中）有一个阻止字体下载的选项。有人搞乱了这个选项，工具栏上的图标显示不正确
哦，tinymce，因为你的图标没有显示，我会损失多少小时：（如果它对任何人都有帮助的话，我在使用tinymce和我的HTML/PHP以及Bootstrap 3。 带有行和容器流体的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>*
一级页面
tinymce.init({
选择器：“textarea.tinymce”，
品牌：错，
梅努巴：错，
插件：“列出链接hr visualblocks表粘贴文本颜色选择器”，
工具栏：“撤消重做|样式选择字体大小选择|”+
“粗体斜体下划线|前景色背景色|”+
“左对齐居中对齐右对齐对齐对齐对齐|”+
“金条纽姆利斯特|凸出缩进|”+
“表|链接取消链接|可视化块”，
身高：300，
调整大小：false
});
**
**
Angular.json如果您使用的是TinyMCE 5.3或以上版本，则需要导入默认图标，如下所示
import 'tinymce/icons/default';
- TinyMCE官方文件