TinyMCE：工具欄圖標不出現
[英]TinyMCE : Toolbar icons not appearing
問題描述
我正在為我的一個項目探索微型 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項目中。 有人知道這個問題嗎？
11 個解決方案
解決方案1
9 2020-07-19 23:51:10
如果您使用的是以上 TinyMCE 5.3，則需要導入默認圖標，如下所示。
import 'tinymce/icons/default';
以下是參考資料：
解決方案2
8 2020-06-22 18:23:17
當我升級到Angular 9時，我的圖標不再顯示。 我不確定它們以前為什么或如何工作，但就我而言，修復很簡單。 我只需要確保將圖標從 node_modules 文件夾復制到angular.json文件的“assets”部分的輸出中。
解決方案3
4 2014-08-21 11:19:40
不要將js文件夾放在外面太遠......
當引用文件夾（tinymce）與 html（或任何它可能是）文件放在一起時，問題解決了......
解決方案4
4 2015-07-17 14:06:26
對於將來會遇到同樣問題的人：還要檢查您的 .htaccess 是否不會阻止以下擴展名：
.eot .svg .ttf .woff
解決方案5
4 2015-12-20 19:29:33
我遇到了同樣的問題，.htaccess 和其他東西對我不起作用....
...最后我發現我已經宣布
*{ font-family: fonts,fonts,fonts, sans-serif !important; }
我發現
“！重要的”
在 @font-face 將被忽略后，我的 css 全部中斷。
在我的特殊情況下，它不顯示 tinymce 的圖標，並且在我刪除 !important 之后一切正常。
所以首先檢查你的一般css設置:)
希望這有幫助
解決方案6
2 已采納 2014-02-03 10:32:50
好的，我得到了這個工作。
仔細分析控制台報錯，發現是tinymce字體沒有下載的問題。
這基本上是 Mozilla Firefox 的 security.fileuri.strict_origin_policy 屬性的問題，需要將其更改為 false 以放寬來源限制。 現在我可以完美地看到這些圖標了。
解決方案7
1 2016-02-12 15:00:06
對於將來會遇到同樣問題的人，第 2 集（請參閱我之前對第 1 集的回答）：
瀏覽器中有一個選項（至少在 firefox 中）可以阻止下載字體。 有人弄亂了這個選項，工具欄中的圖標顯示不正確...
哦，tinymce，由於您的圖標未顯示，我將損失多少小時:(
解決方案8
1 2020-01-07 12:57:33
如果它對任何人有幫助，我在我的 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>*
解決方案9
0 2014-01-14 03:55:43
Tinymce 4 使用 CSS 的 Content 屬性來渲染工具欄圖標
所以任何支持內容屬性的瀏覽器都可以看到
注意： IE8 僅在指定了 !DOCTYPE 時才支持 content 屬性。 （參考 w3schools）
解決方案10
0 2021-09-15 21:02:15
我們遇到了同樣的問題，工具欄圖標沒有顯示。 我們使用的是“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 元素如果不存在則創建。 這超出了我們可以做的范圍，並將其留給其他人向開發團隊提出建議。
解決方案11
0 2022-06-23 09:24:32
確保插件以空格分隔的單個字符串列出，而不是列表。
# 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']
TinyMCE 4在IE9中沒有顯示工具欄圖標（任何模式）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.