【问题标题】:TinyMCE : Toolbar icons not appearingTinyMCE:工具栏图标不出现
【发布时间】:2014-01-25 03:07:27
【问题描述】:

我正在为我的一个项目探索微型 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项目中。有人知道这个问题吗?

【问题讨论】:

  • 尝试加载正确的缩小版本或仅使用 tinymce.js 并尝试.. 哪个版本的 tinymce 4.x.x?
  • 我尝试加载 tinymce.js 但我仍然面临同样的问题。我使用的是 4.0.12 版本。这个问题是否需要任何特定的字符集才能使 unicode 符号可见?
  • 我在 tinymce 4.0.5 dev pkg 上,工具栏图标出现,我刚试过.. 版本可能是个问题,我不确定。
  • 尝试从github.com/tinymce/tinymce/downloads 下载 4.0.5 但这里没有超过 3.5.8 的版本。同样在发布github.com/tinymce/tinymce/archive/4.0.5.zip 中,我无法找到tinymce.js。我假设您在 4.0.5 是最新版本时下载了 tinymce。
  • 那行得通。非常感谢您的帮助。 :-)

标签: javascript tinymce tinymce-4


【解决方案1】:

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

sitepoint Content Property | CSS Tricks Content Description

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

注意:IE8 仅在指定 !DOCTYPE 时才支持 content 属性。(参考 w3schools)

【讨论】:

  • 是的,我确实看到了。我正在使用 FireFox 26。如果是这种情况,当我将指向从本地脚本更改为 tinymce.cachefly.net/4.0/tinymce.min.js 时,它应该向我显示 unicode。这样就排除了浏览器不支持内容属性的可能性。
  • 您可以尝试从您的标记中删除元标记吗?还通过 使此页面与 html5 兼容
【解决方案2】:

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

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

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

【讨论】:

  • 嗯嗯。我将文件夹移动到我的服务器可以到达的地方,瞧,成功了。感谢您指出:)
【解决方案3】:

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

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

【讨论】:

    【解决方案4】:

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

    .eot .svg .ttf .woff

    【讨论】:

    • 感谢您的提示,我的 WPF WebBrowser 控件中有 TinyMCE。当我在 Debug/Release 上运行它时可以看到图标,但在 Published 时看不到。所以我必须将所有:皮肤\lightgray\fonts\中的eot、svg、ttf、woff设置为“内容”和“如果更新则复制”。这成功了:)
    【解决方案5】:

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

    ...最后我发现我已经声明了

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

    我发现

    “!重要”

    在@font-face 将被忽略后破坏我的css。

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

    所以请先检查您的常规 css 设置 :)

    希望有帮助

    【讨论】:

      【解决方案6】:

      致将来会遇到同样问题的人,第 2 集(请参阅我之前对第 1 集的回答):

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

      哦,tinymce,因为你的图标没有显示,我会损失多少小时:(

      【讨论】:

        【解决方案7】:

        如果它对任何人有帮助,我在我的 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>*   
        

        【讨论】:

          【解决方案8】:

          升级到 Angular 9 后,我的图标不再显示。我不确定它们以前为什么或如何工作,但在我的情况下,修复很简单。我只需要确保图标从 node_modules 文件夹复制到 angular.json 文件的“资产”部分的输出中。

          【讨论】:

          • 在我的情况下,它的工作方式略有不同,我将输出指定为:“output”:“/tinymce/icons/”并且它有效。
          【解决方案9】:

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

          import 'tinymce/icons/default';
          

          以下是参考:

          【讨论】:

            【解决方案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="..." to the svg 元素,如果它不存在则创建。这超出了我们的能力范围,将留给其他人向开发团队提出建议。

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2015-12-23
              • 2012-11-23
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多