TinyMCE:工具栏图标未显示

8

我正在为我的一个项目探索tiny 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内容添加到了我的web项目的js文件夹中。有没有人知道这个问题的原因?


尝试加载正确压缩的版本,或者只使用tinymce.js并尝试...使用哪个版本的tinymce 4.x.x? - Nithin
我尝试加载tinymce.js,但仍然面临相同的问题。我正在使用4.0.12版本。这个问题是否需要特定的字符集才能使Unicode符号可见? - saylee
我使用的是 TinyMCE 4.0.5 dev pkg 版本,工具栏图标显示正常。我刚刚尝试了一下,可能是版本问题,我不确定。 - Nithin
1
尝试从https://github.com/tinymce/tinymce/downloads下载4.0.5版本,但这里没有超过3.5.8的版本。在发布版https://github.com/tinymce/tinymce/archive/4.0.5.zip中,我无法找到tinymce.js。我假设您在4.0.5是最新版本时已经下载了tinymce。 - saylee
请访问以下链接以获取4.0.5开发包,请告知是否适用于您的需求。 - Nithin
2
那个有效了。非常感谢你的帮助。 :-) - saylee
11个回答

11

8
升级到Angular 9后,我的图标不再显示。我不知道为什么以及它们以前是如何工作的,但在我的情况下解决方法很简单。我只需确保将图标从node_modules文件夹复制到“angular.json”文件中“assets”部分的输出中即可。
链接图片:icons

1
在我的情况下,有一点不同,我将输出指定为: "output": "/tinymce/icons/",然后它就可以工作了。 - shanti

5
我遇到了同样的问题,但是 .htaccess 和其他东西对我没有用......最后我发现我声明了

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

我发现在我的CSS中,关键字 "!important" 会破坏所有的@font-face之后的设置。在我特殊的情况下,这导致tinymce的图标无法显示,但是当我删除了 !important 后,一切都正常了。所以请先检查您的CSS设置 :) 希望这有所帮助。

删除这个 ! important 的 CSS 规则也解决了我的图标问题。谢谢。 - Babaktrad

4

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

.eot .svg .ttf .woff


谢谢您的提示,我在我的WPF WebBrowser控件中使用了TinyMCE。当我在Debug/Release模式下运行它时,我可以看到图标,但是在发布后就看不到了。所以我不得不将skins\lightgray\fonts\中的所有eot、svg、ttf、woff设置为“Content”和“Copy if newer”。这样就解决了问题 :) - Meir Gabay

4
不要将js文件夹放得太远......问题解决了,只要将参考文件夹(tinymce)与html文件(或其他文件)放在一起即可。

2

好的,我把这个问题解决了。

经过仔细分析控制台错误,我发现这是 tinymce 字体没有下载的问题。

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


好啊。我把文件夹移动到了服务器可以访问的位置,成功了。感谢你指出来 :) - Andy

1

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

# 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']

救命稻草,谢谢你! - jawn

1

我们遇到了相同的问题,工具栏图标没有显示出来。我们使用的是由"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中的每个图标上添加了namespace属性:

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

对我们来说,这个方法可行。该解决方案不应影响作为常规HTML提供的页面,因为该xmlns属性在该DOM中未知(据我所知)。

更好的解决方案是针对所有图标(而不仅仅是默认值)添加一个测试到创建工具栏按钮的脚本中:如果(doctype is xhtml),则将xmlns="..."添加到已创建的svg元素中(如果不存在)。这超出了我们能做的范围,我们将把它留给其他人向开发团队提出建议。


1

给将来遇到同样问题的人,第二集(有关第一集请参见上面我的先前答案):

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

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


1
如果有所帮助,我在我的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>*   

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接