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

Utilizing JSON and select for dependency management

Let's say we have a JSON object: { "A": { "1": "1", "2": "2", "3": "3" }, "B": { "4": "4", "5": "5", "6": "6" }, "C": { "7": "7", "8": "8" } } And we also have ...

javascriptjqueryhtml

Tips for determining the width of an image and utilizing that measurement as the height in order to create a balanced square image

I am currently facing an issue with my code that is used to retrieve the width of an image which is set in percentages. Although I am able to obtain the width in pixels, I am struggling with correctly inserting the variable into the CSS property value usin ...

javascriptjqueryhtmlcssvariables

What is the determined method for calculating the pixel size of an SVG image?

Did you know that the Stackoverflow logo is actually an <a> element with a SVG image as its background? #hlogo a { text-indent: -999em; display: block; width: 200px; height: 50px; background-image: url("img/sprites.png?v=c4222387 ...

csssvg

Exploring .ENV Variables using Angular 2 Typescript and NodeJS

After completing the Angular2 Quickstart and tutorials, I'm now venturing into connecting to a live REST Api. I need to include authentication parameters in my Api call, and from what I've gathered, it's best practice to store these paramete ...

swiftnode.jstypescriptangularnpm

Assistance with changing styles

Hey there, I could really use some assistance. I've created a style switcher, but I'm struggling to figure out how to replace the stylesheet properly. Currently, my code empties the <head> element when what I really need is for it to simply ...

javascriptcssajaxjquery

Comparing HTML5 and web services with MVC3

Within my organization, there is an ongoing discussion regarding the best approach to developing our future web applications. We currently have two distinct groups of developers who share common interests. All parties agree on utilizing html5, css3, and jQ ...

ajaxasp.net-mvc-3web-serviceshtml

Having an excess of 32 individual byte values

My current project involves developing a permission system using bitwise operators. A question came up regarding the limitation of having only 32 permissions in place: enum permissions { none = 0, Founder = 1 << 0, SeeAdmins = 1 << ...

javascripttypescriptbytebitwise-operators

Is there a way to adjust the placement of this AccordionDetails utilizing Material UI's Grid system?

Here is a sketch of what I am aiming for: This is my implementation using Material UI's Accordion component. Below is the code snippet for the AccordionDetails section, which is where I need assistance. Specifically, I want to align FilterC/the swit ...

cssreactjsmaterial-ui

Combining strings with JQuery

Looking for help with a code snippet <script> function goToDetails($i){ $(function(){ var transValue = $('#trans'+$i).html(); var mileageValue = $('#mileage'+$i).html(); var engineValue = $('#eng'+$i).html ...

phpjavascriptjqueryhtml

If element Div is labeled as either A, B, or C, it should smoothly fade out and then fade in as Div

I'm currently working on enhancing the navigation of my portfolio website and I’m facing a challenge in adding additional properties to my toggle() function. This basically involves creating a filter system with four possible options, which are: ...

jqueryhtmlcss

Challenges with line height in IE when adjusting font size in textarea

I'm facing an issue with adjusting the font size in a textarea using JavaScript. While it works perfectly in Firefox, there are some problems in IE. Specifically, the line-height does not change accordingly. This results in gaps between lines when the ...

javascriptfont-sizecss

When attempting to import the image path from a JSON file, a ReferenceError occurs stating that the data variable is not

I'm currently attempting to iterate through image paths in a JSON file and display them in a browser using the "img" tag. While hardcoded values work perfectly fine, I encountered an issue when trying to switch to a variable as outlined in this post: ...

jsonreactjstypescript

Why is the child's CSS hover not functioning when the body has an event listener attached to it?

Check out the repository link here: https://codepen.io/Jaycethanks/pen/WNJqdWB I am trying to achieve a parallax effect on the body and image container, as well as a scale-up effect on images when hovered over. However, the hover functionality is not work ...

javascriptcssevent-listenermousemove

Can the typical drag and drop cursors be ignored in an HTML drag operation?

I've been working with the HTML drag and drop API to allow users to resize columns in a table. However, I've noticed that when a user starts dragging a column, the cursor changes to one of the default drag and drop effects (such as move or none). ...

javascriptcsshtmldrag-and-drop

Leveraging Next.js with TypeScript and babel-plugin-module-resolver for simplified import aliases

I am currently in the process of setting up a Next.js project with typescript. Despite following multiple guides, I have encountered an issue concerning import aliases. It's unclear whether this problem stems from my configuration or from Next.js its ...

typescriptimportnext.jsbabel-plugin

Click the link to capture the ID and store it in a variable

Currently working on a project involving HTML and JavaScript. Two HTML pages ("people.html" and "profile.html") are being used along with one JavaScript file ("people.js") that contains an object with a list of names, each assigned a unique ID: var person ...

javascriptjqueryhtml

How can I retrieve the HTML content of a ReactJS rectangle element saved in an array?

Within a loop, I am creating rectangle elements and adding them to an array: rectangles = []; render: function() { for (var i = 0 ; i < 10; i++) { rectangles.push (<Rectangle height={this.props.afm} width={this.props.afm} x={xpos} y={ypos} va ...

htmlarraysreactjsstyleselement

Is there a way to include multiple TinyMCE editors with unique configurations for each one?

Is it possible to incorporate multiple TinyMCE editors on a single page, each with its own distinct configuration settings? If so, how can this be achieved? ...

javascripttinymce

Tips for preventing the appearance of a horizontal scroll bar when utilizing the FlexLayoutModule in Angular

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-property-feed', templateUrl: './property-feed.component.html', styleUrls: ['./property-feed.component.scss'] }) export class Prope ...

cssangularangular-flex-layout

Guide to declaring variables using jQuery

Currently tackling a school project, I stumbled upon some online example solutions and managed to decipher most of the code. However, there is one line that has me puzzled. var $newTweet = $('<div class=tweet></div>'); My assumption ...

javascriptjqueryhtmlcss