TinyMCE：工具栏图标不出现

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>

我能够完美地看到所有图标。 我已将tinymce下载中的所有js内容添加到我的js文件夹中的Web项目中。 有人知道这个问题吗？

Answer 1

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

import 'tinymce/icons/default';

以下是参考资料：

• TinyMCE 官方文档https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/

Answer 2

当我升级到Angular 9时，我的图标不再显示。 我不确定它们以前为什么或如何工作，但就我而言，修复很简单。 我只需要确保将图标从 node_modules 文件夹复制到angular.json文件的“assets”部分的输出中。

Answer 3

不要将js文件夹放在外面太远......

当引用文件夹（tinymce）与 html（或任何它可能是）文件放在一起时，问题解决了......

Answer 4

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

.eot .svg .ttf .woff

Answer 5

我遇到了同样的问题，.htaccess 和其他东西对我不起作用....

...最后我发现我已经宣布

*{ font-family: fonts,fonts,fonts, sans-serif !important; }

我发现

“！重要的”

在 @font-face 将被忽略后，我的 css 全部中断。

在我的特殊情况下，它不显示 tinymce 的图标，并且在我删除 !important 之后一切正常。

所以首先检查你的一般css设置:)

希望这有帮助

Answer 6

好的，我得到了这个工作。

仔细分析控制台报错，发现是tinymce字体没有下载的问题。

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

Answer 7

对于将来会遇到同样问题的人，第 2 集（请参阅我之前对第 1 集的回答）：

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

哦，tinymce，由于您的图标未显示，我将损失多少小时:(

Answer 8

如果它对任何人有帮助，我在我的 HTML/PHP 中使用 TinyMCE 并使用 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 9

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

sitepoint 内容属性| CSS技巧内容说明

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

注意： IE8 仅在指定了 !DOCTYPE 时才支持 content 属性。 （参考 w3schools）

Answer 10

我们遇到了同样的问题，工具栏图标没有显示。 我们使用的是“https://cdn.tiny.cloud/1/YOUR_CODE/tinymce/5/tinymce.min.js”提供的CDN版本。 上述建议均无效。

然后我意识到问题在于 HTML 与 XHTML。 在使用 HTTP Content-Type=text/html 提供的页面上，会显示图标。 在使用 Content-Type=application/xml 或 application/xhtml+xml 提供的页面上，它们不会出现。

原因是对于真正的 xhtml，XML DOM 无法识别 tinymce 使用的“svg”元素。 为了让 XML DOM 正确处理 svg 元素，它们必须位于 svg 命名空间中。

为了更正图标的显示，我切换到一个自托管的 tinymce，并将命名空间属性添加到 tinymce/icons/default/icons.js 和 icons.min.js 中的每个图标：

tinymce.IconManager.add('default', {
      icons: {
        accessibility-check: <svg xmlns="http://www.w3.org/2000/svg" width="24" [ect...]

对我们来说，这很奏效。 该解决方案不应影响作为常规 html 服务的页面，因为该 DOM 不知道 xmlns 属性（afaik）。

适用于所有图标（不仅仅是默认值）的更好解决方案是在创建工具栏按钮的脚本中添加一个测试： if(doctype is xhtml) add xmlns="..." 到 svg 元素如果不存在则创建。 这超出了我们可以做的范围，并将其留给其他人向开发团队提出建议。

Answer 11

确保插件以空格分隔的单个字符串列出，而不是列表。

# Correct
plugins: 'advlist autolink lists link image charmap print preview anchor ' +
          'searchreplace visualblocks code fullscreen ' +
          'insertdatetime media table paste code help wordcount'

# Incorrect
plugins: ['advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount']