Toolbar icons do not appear in the tinymce text editor (4.0.1)

Question

I am upgrading tinyMCE from 3.4.2 to 4.0.1. Everything works perfectly in place. But the problem started when I posted everything on the server. The toolbar loads fine, but the icons do not display correctly. Note. I have separate projects for applications and CDN. I assume this is a cross-domain / url problem, but unable to figure it out. The toolbar is currently loading, as shown in the screencast section!

tinyMCE.init({ // General options theme: "modern", editor_selector: "mceDesignerEditorAutoresize", relative_urls: false, convert_urls: false, toolbar1: "cut copy paste | bold italic | undo redo | bullist numlist | outdent indent blockquote | link unlink image code | inserttime preview | forecolor backcolor | imgCustom attachCustom", toolbar_items_size: 'small', plugins: [ "autoresize advlist autolink lists link image charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime nonbreaking save table contextmenu directionality", "emoticons template paste textcolor" ], accessibility_warnings: false, accessibility_focus: false, setup: function (ed) { ed.addButton('imgCustom', { title: 'Image', image: $("#jsTinyMCEImageUrl").val().toString(), onclick: function () { openModalPopup($("#jsTinyMCEImagePath").val(), "width=700,height=600"); } }); ed.addButton('attachCustom', { title: 'Attachment', image: $("#jsTinyMCEAttachUrl").val().toString(), onclick: function () { try { openModalPopup($("#jsTinyMCEAttachPath").val(), "width=400,height=200"); } catch (e) { } } }); }, language: $('#TinyMCECurrentLanguage').val(), paste_auto_cleanup_on_paste: true 

});

Answer 1

Found that the folder / js / tinymce / skin / lightgray / fonts is not copied to the server. This happened because Visual Studio did not recognize the font files and marked them as “No” in Action Build, and as a result, these files were not published.

Solving it, right-clicking the font files, select "Properties" and "Set value" for "Build action" on "Content".

Answer 2

I just wanted to add additional information to this issue, for people who come later. I experienced exactly the same problem, but in my case it is related to downloading fonts between sites in Firefox. (You may still have a problem if you check in Firefox)

In any case, the solution should allow downloading fonts between sites with the following http-header on the site from which the TinyMCE code is downloaded:

 Access-Control-Allow-Origin "*" 

Details on how to do this can be found in How to: Add an Access-Control-Allow-Origin Header