سؤال
I was exploring tiny mce editor for one of my project and what I found out was the Icons in the tool bar are not appearing. It is showing some unicode which the browser is unable to display. Here is the html code for the page:
https://stackoverflow.com/questions/20971537
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!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>
On the other hand if I replace the script with
<script type="text/javascript" src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
I am able to see all icons perfectly. I have added all the contents of js in the tinymce download into my web project in the js folder. Does anyone have a clue about this issue?
المحلول 6
Okay I got this one working.
After carefully analyzing the console error, I found out that it was an issue of tinymce font which was not getting downloaded.
It was basically the issue of Mozilla Firefox's security.fileuri.strict_origin_policy property which needed to be changed to false to relax the origin restriction. Now I am able to see those icons perfectly.
نصائح أخرى
If you are using TinyMCE 5.3 of above, you need to import default icons as below.
import 'tinymce/icons/default';
Here are the references:
My icons stopped showing up when I upgraded to Angular 9. I'm not sure why or how they worked before, but the fix was simple enough in my case. I just had to ensure the icons were being copied from the node_modules folder into my output in the "assets" section of the angular.json file.
don't place the js folder too far outside outside.....
problem solved when the referring folder(tinymce) placed together with the html(or whatever it may be) file...
To whoever will have the same problem in the future : also check that your .htaccess doesn't block the following extensions :
.eot .svg .ttf .woff
I had the same problem and the .htaccess & other stuff don't worked for me....
...finally i found out that i have declaired
*{ font-family: fonts,fonts,fonts, sans-serif !important; }
i found out that the
"!important"
breaks my css all after the @font-face will be ignored.
in my special case it doesn't show the icons of tinymce and after i removed the !important everything works fine.
so check your general css settings first :)
hope this help
To whoever will have the same problem in the future, episode 2 (see my previous answer above for episode 1) :
there is an option in the browser (at least in firefox) to block fonts from being downloaded. Someone messed with this option, and the icons in the toolbar were not displayed correctly ...
Oh tinymce, how many hours will I lost because of your icons not showing :(
If it helps anyone, I was using TinyMCE with my HTML/PHP and using Bootstrap 3. The div with row and container-fluid was making my icons not appear.
<!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>*
Tinymce 4 Uses Content Property Of CSS to render toolbar icons
sitepoint Content Property | CSS Tricks Content Description
so any browser that supports content property you 'll able to see that
Note: IE8 only supports the content property if a !DOCTYPE is specified. (ref. w3schools)
We had the same issue where toolbar icons were not displaying. We were using the CDN version provided by "https://cdn.tiny.cloud/1/YOUR_CODE/tinymce/5/tinymce.min.js". None of the suggestions above worked.
Then I realized the issue is with HTML vs XHTML. On pages served with HTTP Content-Type=text/html, the icons are displayed. On pages served with Content-Type=application/xml or application/xhtml+xml, they do not appear.
The reason for this is that for true xhtml, the XML DOM does not recognize the "svg" elements which are used by tinymce. In order for the XML DOM to treat the svg elements correctly, they have to be in the svg namespace.
To correct the display of icons, I switch to a self hosted tinymce and added the namespace attribute to each of the icons in tinymce/icons/default/icons.js and icons.min.js:
tinymce.IconManager.add('default', {
icons: {
accessibility-check: <svg xmlns="http://www.w3.org/2000/svg" width="24" [ect...]
For us, this worked. The solution should not impact pages served as regular html, since the xmlns attribute is not known to that DOM (afaik).
A better solution that would work for all icons (not just the defaults), would be to add a test in the script that creates the toolbar buttons: if(doctype is xhtml) add xmlns="..." to the svg element that was created if it does not exist. This is beyond the scope of what we can do and will leave it to others to suggest to the develpment team.
Make sure plugins are listed in a single string separated by space, not a list.
# 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']
