Having trouble getting Tinymce to appear on the screen

I am currently attempting to install TinyMCE for use with my text editor in order to provide the user with a text box similar to the one on Stack Overflow. However, I am encountering an issue where it is not displaying as expected.

In the header of my index file, I have included the following:

<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
<script src='https:https://cloud.tinymce.com/stable/tinymce.min.js'> 
</script>
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
 <script>
      tinymce.init({selector:'infotextarea'});
 </script>

Then, within my info page, I have added the following code:

<textarea id="infotextarea">Your content here.</textarea>

Can someone please help me understand why the TinyMCE text box is not being displayed?

htmlcsstypescripttinymceangular5

Answer №1

It is possible that when you execute the tinymce.init function, the textarea has not yet been rendered in the DOM.

To troubleshoot this issue, you can insert a debugger in your code like so:

<script>
      debugger;
      tinymce.init({selector:'infotextarea'});
</script>

Once the web execution hits that line with the debugger, open your browser's development console and enter the following:

$('#infotextarea').length

If the result is greater than 0, then the textarea exists at that point and the problem lies elsewhere. However, if it returns 0, it means that the view has not been created yet, providing more insight into the issue.

Answer №2

To select a <textarea> by its ID, you must use a valid CSS selector.

selector: "#infotextarea"

(make sure to include the # at the beginning of the selector)

Furthermore, it seems like TinyMCE is being loaded multiple times in your code - this may not be necessary as loading it once should suffice.

Answer №3

While it may not be the exact solution to my query, utilizing ckeditor proved to be highly effective in solving the issue at hand. It seems there might be an error lurking somewhere that neither myself nor my team was able to detect when using tinymce.

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

Using ng-repeat and selectize in AngularJS to populate a multi-select drop-down with values and set selected values

In this instance, I was able to achieve pure HTML select multiple functionality by using this example (JS Bin of pure html select tag). However, instead of sticking to just the pure HTML approach, I opted to use the Selectize plugin. The confusion arose w ...

javascripthtmlangularjsselectize.jsmultiple-select

Advanced TypeScript deduction

I have a coding query: interface Feline{ purr:boolean } interface Jungle{ lion:Feline, tiger:Feline, leopard:Feline } later in the code: let cats:Jungle;// assume it's properly defined elsewhere for(const j in cats) if(cats.hasOwnProperty(j)){ ...

typescripttypescript2.0

How can we utilize Typescript to check if the intern 4 page has finished loading?

I've managed to set up a function in intern 4 using TypeScript that waits for the page to load. However, there are instances where it doesn't work and throws a TimeOutError even when I catch the error within the function. Can someone please take ...

typescriptintern

The debate between TypeScript default generic types and contextual typing

Contextual Typing in TypeScript is an interesting feature where the correct type is inferred from the return value when a generic type is not specified. While it usually works well, there are instances where it can be unpredictable. For example, in some c ...

typescripttypescript-generics

A code to ensure input values are always set to the maximum possible value

I recently developed a script that monitors the live value property of 3 <input> elements, correcting them if the live value is outside the specified range. However, I encountered an issue where the script automatically sets the value to the max as s ...

javascripthtml

Modifying the URL does not alter the selected tab

As part of my project, I wanted to ensure that when the page is refreshed, the previously selected tab remains active. To achieve this, I created a basic HTML page and added some jQuery. However, I encountered an issue when manually changing the URL from ...

javascriptjqueryhtmlcsslocal-storage

Solving the problem of Hover Effects in CSS

I am struggling to get the nav-link to be blue in color with a dark-blue hover effect. I managed to set the color correctly, but for some reason, the hover effect is not working. Can anyone help me figure out what the issue might be? Additionally, does any ...

htmlcssbootstrap-5

Prevent the parent component's ripple effect from being activated by the child component

If I have a simple code snippet like the following: <ListItem button={true} > <Typography variant='caption' color='primary'> {value} </Typography> <Button onClick={foo} > Button ...

javascriptcssreactjsmaterial-uidom-events

Combining Images Together in JavaScript

In my current javascript project, I've encountered an issue. Specifically, I'm trying to overlay one image on top of another image using the following code: <div> <img src="1.jpg" style="z-index:1;"/> <img src="2.png" style="z ...

htmlcssimage

Having issues with image hover and click functionality

My website has an image with the cursor set to pointer and a function that should show a hidden element when clicked. However, it's not working at all. When I hover over it or click on it, nothing happens. Here is a screenshot of the issue along with ...

javascripthtmlcsswordpress

Creating dynamically generated routes in Angular or Angular 9 before initialization

I'm currently working on a project where I am in the process of converting an AngularJS application to Angular. The main challenge that I am facing at the moment revolves around routing. To sum it up: My requirement is to define routes based on an AP ...

javascriptangulartypescriptangular-routerangular9

Display a loading GIF for every HTTP request made in Angular 4

I am a beginner with Angular and I am looking for a way to display a spinner every time an HTTP request is made. My application consists of multiple components: <component-one></component-one> <component-two></component-two> <c ...

javascripthtmlangulartypescript

Error code 2532 occurs when trying to access an object using square brackets in TypeScript

Encountered the ts error: Object is possibly 'undefined'.(2532) issue while trying to access the value of a field within an object, where the object key corresponds to a value in an Enum. Below is a concise example to showcase this problem: en ...

typescriptobjectenums

Showing pictures from a database utilizing PHP and HTML

I'm looking to showcase the images stored in my database within an HTML table. The files are saved as 'BLOB' and I want them to appear under the 'Photo' column. Can anyone guide me on the code needed to display these images? ...

phphtmlimageblobecho

Guide to placing a heading in one corner and a button in the opposite corner

Desired Outcome: I am aiming to achieve a design similar to the one shown in the image below. Actual Result: However, what I ended up with looks more like the image below. This is my HTML: <div class="heading-container d-flex flex-row justify-con ...

htmlcsstwitter-bootstrap

Div element remains fixed in width while zooming in

I'm encountering an issue with a centered div, where the width is set to 50% and the max-width is set to 100%. When I zoom in, the width remains constant but the height increases. Despite setting the max-width to 100%, why does this occur? And most im ...

htmlcss

What is the most effective method for declaring a constant within a WebComponent?

After receiving questions, I included more details on how I'm utilizing the constants. The main issue I am encountering is that the constants are being added to the global object, which raises concerns about potential name collisions. I created a Web ...

javascripthtmlconstantsweb-componentstandards

Showcasing Portfolio Work in a User-Friendly Mobile Design

Currently revamping my portfolio website and looking for ways to optimize the display of my personal projects. I have a card-like interface in place that works well on desktop but only shows one project at a time on mobile devices. Seeking solutions to imp ...

javascripthtmlcsssliderportfolio

Issue with displaying ChartJS on Django HTML page

I am attempting to create a horizontal bar chart in HTML, but unfortunately, it is not displaying correctly. I have sent 2 variables from views.py, which are {{top5StockCode}} and {{top5TotalSales}}. The values of {{top5StockCode}} that were sent from vi ...

pythonhtmldjangochart.js

angular and node: troubleshooting the $http.get error

I have encountered an issue with the $http.get instruction. Without it on the main page, I receive a result of "random 46" which is correct. However, when I include $http.get, I get a result of "random {{ number }}". How can this problem be resolved? -se ...

javascripthtmlangularjsnode.jsget