Icons not appearing in TinyMce

Currently, I am utilizing Laravel in combination with Blade and Vue.js, specifically the tinymce-wrapper @tinymce/tinymce-vue.

The Issue: Following a transition from cloud to self-hosted, TinyMce (version 5.7.0) is not displaying icons as expected.

<template>
    <div id="app">
        <editor
            tinymce-script-src="/lib/tinymce/tinymce.min.js"
            v-model="content"
            api-key="no-api-key"
            :init="{
         height: 500,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         ],
         toolbar:
           'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
       }"
        />
    </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
    name: 'app',
    components: {
        'editor': Editor
    },
    data:function(){
        return{
            content:'test'
        }
    }

}
</script>

I have attempted adding:

import 'tinymce/icons/default'

However, this did not resolve the issue. Any insights or suggestions?

Answer №1

After downloading tinymce version 5.3.0, I decided to update my icons folder by copying the contents into my existing tinymce directory. Surprisingly, the icons are now successfully loading.

However, it makes me curious as to why these icons were not included in the latest version 5.7.0.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the white screen issue when utilizing Inertia in Laravel for page rendering?

The technologies I'm working with are: Laravel, Inertiajs, and Vue.js. Although I am new to using Laravel, I encountered an issue when running composer require laravel/breeze --dev and php artisan breeze:install vue which resulted in my Laravel proj ...

Real-time updates with Pusher not syncing correctly in Laravel Echo, Vue.js, and Laravel chat application

Recently, I've been diving into a fascinating tutorial on how to construct a real-time chat application using Laravel, Vue js, Laravel Echo, and Pusher js. After diligently setting my BROADCAST_DRIVER=pusher in the env file and configuring the pusher ...

Invoke a method from a related component within the same hierarchy

Imagine this scenario: You're working on a reusable item carousel. The slide track component and the slide navigation component need to be independent and in a sibling relationship so you can position the buttons wherever you want. But how do you trig ...

Delay loading of external JavaScript with data attributes

Exploring options for lazy loading this code snippet: <script async src="https://comments.app/js/widget.js?3" data-comments-app-website="TvibSQx_" data-limit="5" data-color="29B127" data-dislikes="1" dat ...

Adjust the placement of a div within another div based on various screen sizes dynamically

Currently, I am working on an Ionic 2 app where the user is required to select specific points on the screen. These coordinates will then be utilized on another screen with a different size. My initial attempt at using rule of three/cross multiplication pr ...

Using Sequelize and Express API for verification in the controller is an essential component of building

I'm currently working on building the API for my web app, utilizing Sequelize and Express. I have set up models with Sequelize and am in the process of developing controllers and endpoints. My main query is: Should I perform data validation checks be ...

What is the best way to retrieve the Axios Post response in React?

I'm facing a small issue. In my ReactJS code, I have a post function that is functioning correctly. However, I want to access the response of this function outside its scope, right where I called it. Is there a way to achieve this? async function che ...

Error: Cannot call method rewriteRequestUrl in _this7._config.server in React native version 0.64.1

After diligently following all the guidelines provided at the upgrade helper for transitioning from RNv0.62 to v0.64.1, I managed to successfully install my app on the device. However, my metro bundler is encountering an obscure error that has left me perp ...

Issue with adding HTML content to bootstrap modal not functioning as expected

Having trouble displaying an image in a bootstrap modal by using data- attribute within a php foreach loop. The image doesn't seem to appear in the target div. Here's my code snippet: <script> $(document).ready(function(){ $( ".subscri ...

I would like to terminate the property when processing it on a mobile device

<div class="col-sm-24 embed-responsive"> <iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe> </div> .embed-responsive iframe { height: 185px; margin-top: -4%; paddin ...

I prefer to have my side navigation bar open on desktop and laptop screens, but closed on mobile devices

I am experiencing an issue with the side navigation menu. Is there a way to have the side nav instantly open on desktop, while remaining closed on mobile phones? I have tried using the "active" class but the side nav stays closed. <!DOCTYPE html> & ...

Discovering whether x is equal to any value within an array using JavaScript

I am seeking a way to modify my current if statement, which looks like this: if (x==a||x==b||x==c||x==d||x==e) { alert('Hello World!') }; Is there a method to test whether x matches any of the values in an array such as [a,b,c,d,e]? Your as ...

The stylesheet is linked, but no changes are taking effect

I've linked my template.php to style.css, and when I make changes in template.php, they show up fine. However, if I make changes in the stylesheet, nothing happens. What should I do? My website is not live; I'm working on it using a WAMP server. ...

Using PHP to render MySQL stored values as raw HTML in a Vue component

I am struggling with a value stored in MySQL as <b> supposed to be bold </b>. Even after trying various HTML entity related functions in PHP while fetching the data, I have had no success. //The fetched data will be returned as JSON for Vue ...

transforming AJAX JSON responses into arrays

I am currently encountering an issue where I receive a JSON object response from a Rails controller like so: "77.576343,12.964343,77.576413,12.963679,77.575233,12.96545,77.5760913,12.9657723,77.575217,12.965333" However, I require this data to be formatt ...

Ways to update a single column in an HTML table when there is a change

I'm stuck trying to find a more efficient method for updating a column in an html table without having to reload the entire table. The table consists of player stats, all pulled from my MYSQL database and displayed in the table except for the last col ...

Populate an AngularJS select dropdown with JSON data and automatically pre-select the specified value

I am currently dealing with 2 entities: project and project_types. Each project can have one or multiple project_types associated with it. Using ajax (ng-init), I am retrieving the project data (including its related project_types) and all available proje ...

In the Rails environment, it is important to verify that the data sent through $.post method in jQuery is correctly

I’m facing an issue with my jQuery script when trying to post data as shown below: $.post({ $('div#location_select').data('cities-path'), { location_string: $('input#city_name').val() }, }); Although this code work ...

I am facing an issue where Bootstrap button classes are duplicating when I inspect the code. How can I resolve this

Can anyone help me with an issue I am facing with a Bootstrap button? Despite using only the btn btn-default classes, when inspecting it in Chrome, multiple classes are being displayed on the button. I'm unable to figure out why this is happening and ...

Attempting to retrieve an array within a Mustache JavaScript template

I'm attempting to retrieve data from a mustache array using this.location.coordinates.0: <div class="block"> <label>Location (longitude/latitude):</label> {{location.coordinates.0}}/{{location.coordinates.1}} </d ...