Question

我正在为我的一个项目探索微小的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>

另一方面，如果我用

替换脚本

<script type="text/javascript" src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>

我能够完美地看到所有图标。我已将tinmsce下载中js的所有内容添加到js文件夹中的我的web项目中。有没有人对这个问题有所了解？

Answer 1

如果您使用的是TinyMCE 5.3以上版本，则需要导入以下默认图标。

import 'tinymce/icons/default';

以下是参考文献：

您很棒http://www.clapself.com
TinyMCE官方文档https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/

Answer 2

升级到 Angular 9 后，我的图标停止显示。我不确定它们为什么或以前如何工作，但是就我而言，解决方法很简单。我只需要确保将图标从node_modules文件夹复制到angular.json文件“资产”部分的输出中即可。

Answer 3

请勿将js文件夹放在外面太远..... enter image description here

问题解决了当引用文件夹（tinymce）与html（或其任何可能）文件放在一起时... enter image description here

Answer 4

对于将来会遇到同样问题的人：还要检查您的.htaccess是否阻止以下扩展：

.eot .SVG .TTF .woff

Answer 5

好的，我让这个工作了。

在仔细分析控制台错误后，我发现这是一个没有下载的tinymce字体问题。

这基本上是Mozilla Firefox的security.fileuri.strict_origin_policy属性的问题，需要将其更改为false以放宽原点限制。现在我能够完美地看到这些图标。

Answer 6

对于将来会遇到同样问题的人，第2集（参见我上面针对第1集的上一个答案）：

浏览器中有一个选项（至少在firefox中）阻止下载字体。有人搞乱了这个选项，工具栏中的图标没有正确显示......

哎呀，因为你的图标没有显示，我会失去多少小时:(

Answer 7

如果可以帮助任何人，那么我正在将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>*

Answer 8

Tinymce 4使用CSS的内容属性来渲染工具栏图标

sitepoint Content Property | CSS Tricks Content Description

所以任何支持内容属性的浏览器都可以看到

注意：如果指定了！DOCTYPE，IE8仅支持content属性。（参考w3schools）

TinyMCE：工具栏图标没有出现

8 个答案: