Menu
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:
<!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?
370
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:
193
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.
35
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...
4
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
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
