Discovering the value of an HTML element node in the TinyMCE editor through the use of JavaScript or jQuery

Is there a way to retrieve the node name value using JavaScript or jQuery within the TinyMCE editor?

Currently, I am only able to access the nodeName using the code snippet below:

var ed = tinyMCE.activeEditor;
var errorNode = ed.selection.getNode().nodeName;
alert(errorNode);

I have attempted using jQuery's text() and value() functions but have been unsuccessful in fetching the node name value within HTML tags.

My goal is to extract the value from HTML tags. For instance, if I have span tags like this: 

<span color="error">That's great</span>

Can anyone offer suggestions or assistance on this matter?

Thank you in advance.

javascriptjqueryhtmlcsstinymce-4

Answer №1

Thomas Altmann's suggestion in the comment mentioned a way to retrieve the DOM Node value using textContent, innerHTML, and innerText. Here's how you can implement it:

var ed = tinyMCE.activeEditor;
var text = ed.selection.getNode().textContent; // or innerHTML and innerText
alert(text); // This is awesome

For obtaining all the editor content without HTML tags, you can utilize the getContent method:

window.tinyMCE.activeEditor.getContent({ format: 'text' })

I hope this explanation proves helpful!

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

Suitable HTML container for ASP form over HTML table

Can anyone advise on the best HTML container to use for an ASP form that can be styled with CSS instead of an HTML table? For example, consider the following form on an aspx page: <form id="WPF" runat="server"> <asp:Label ID="lblCCode" Text="Cou ...

asp.nethtmlcss

Running a Python script through a Javascript event

I'm looking to enhance my webpage by implementing a feature where users can generate a personalized QR code with the click of a button. My current setup involves a Python script that creates the QR code image and saves it as a .png file. I want to int ...

javascriptphppythonhtmldjango

What could be causing the browser.get method to fail to redirect to the specified URL?

I have organized my files in a folder structure that looks like this: project structure Currently, I am following the steps outlined in this particular tutorial The contents of my package.json file are as follows: { "name": "node_cucumber_e2e", "ver ...

javascriptnode.jstestingprotractor

Operating PHP program from html on Beaglebone Black Rev C Debian

I've created a JavaScript program that utilizes node.js to manage GPIO from an IO.html page to the beaglebone. I simply initiate the JavaScript with "node myscript.js". Now, I'm looking to incorporate a PHP file that will store data from the IO. ...

javascriptphphtmlmysql

Converting numbers to strings based on locale in React Native

I have a quantity that, when using the amount.toFixed() function, produces the string "100.00". I would like this result to be formatted according to the specific locale. For example, in Italian the desired output is 100,00, while in English it should be ...

javascripttypescriptreact-nativelocale

Communication between child and parent components in Vue.js is an essential feature

Attempting to invoke functions from my component to Vue for the login process. This is the code snippet of my component : Vue.component('auths', { data: function() { return { ip: '', sessiontoken: '' } ...

javascriptvue.jsvue-component

An exploration of effortlessly moving elements using webdriver.io - the power of

I have been attempting to utilize the drag and drop method in WebDriver.io, but I am encountering issues. I followed the example for drag & drop on this website: https://www.w3schools.com/html/html5_draganddrop.asp. This functionality is essential for ...

javascripttypescriptselenium-webdriverselenium-chromedriverwdio-v5

What are some ways to transfer information seamlessly between two PHP files without the need for a page refresh?

On my webpage, I have implemented two iframes. The first iframe contains a button that, when clicked, should reload the second iframe with specific data, without reloading the first iframe. I am looking for a way to achieve this. Can anyone help? <?p ...

phpjavascripthtmlajaxpost

What is the best way to create a TypeScript interface or type definition for my constant variable?

I'm facing challenges in defining an interface or type for my dataset, and encountering some errors. Here is the incorrect interfaces and code that I'm using: interface IVehicle { [key: number]: { model: string, year: number }; } interface IV ...

javascripttypescripttypesinterface

What is the best way to identify when a cell has been modified in ng-grid aside from just relying on the ng-grid event

My web application features an editable ng-grid that has greatly simplified my work, but I have encountered a minor issue. I need a way to detect when a user makes changes to the grid without having to compare each field before and after. Currently, I am ...

javascriptangularjscellng-grid

Insert HTML elements into nested CSS classes

My goal is to utilize jQuery for looping through classes and adding text to an HTML element. I am currently working with the following example HTML: <div class="question"> <div class="title"> <strong>Here's the question ...

javascriptjqueryhtmlcss

Reducing text size upon cell selection in Material UI Table

Seeking assistance in identifying the CSS property responsible for subtly shrinking text within cells when selected To see the issue, simply click on a cell in this code sandbox: https://codesandbox.io/s/material-ui-table-virtualized-t2xkt IMPORTANT: se ...

cssreactjsmaterial-ui

One Functionality on Button is Failing to Execute among Several Tasks

I've encountered an issue with one of the tasks triggered by a button click. The button successfully executes two out of three tasks (hides them on click), except for the last task which involves a text-blinking JavaScript function. I've used the ...

javascripthtmlscript-tag

Adding a class to an img tag with TinyMCE

Currently, I am utilizing the TinyMCE editor as a standalone editor in my content management system (CMS). Within the CMS, there is an automatic setting that adds a curved border to any image tags within the cms div ID. In certain cases, I require the op ...

phpjavascriptcsstinymcewysiwyg

Having trouble sending AJAX select options with Choices.js

I'm currently utilizing Choices.js (https://github.com/jshjohnson/Choices) along with Ajax to dynamically populate data into my select field from a database. However, I've encountered an issue when using the following code: const choices = new C ...

javascriptajax

Sending a data value from a Controller to jQuery in CodeIgniter

Getting straight to the point. Check out some of the functions from my Student Model: public function get_exam_data($exam_id){ $this->db->select('exam_id, exam_name, duration'); $this->db->from('exams'); $this- ...

phpjquerymysqlajaxcodeigniter

Steps for modifying material-ui timepicker to display time in a 24-hour format

Presently, I am utilizing a Timepicker from material-ui. It is currently configured with type="time", allowing me to select times throughout the day in 12-hour increments with an AM / PM choice. However, I wish to adjust my picker to a 24-hour format, elim ...

javascriptcssreactjsmaterial-ui

Can the (Bootstrap) popover cause a button to shift position?

<- this is where my website is located After clicking the '*로그인' button, it seems to redirect to the '*가입하기' button. Is there a way to prevent the button from moving when clicked? *('로그인' translates t ...

javascriptphpjquerytwitter-bootstrap

The PHP response is constantly changing and adapting, creating

My webpage has a button that triggers an ajax request to a php page, all working well. I have a database called messages, with columns for "id", "receiver", "sender", and "message". Let's say there are two entries in the database where both the sender ...

phpjqueryajax

What is the method to adjust the anchor point for a MUI popover?

I currently have the following code for handling a popover: const [open, setOpen] = useState(false); const anchorRef = createRef() const handleClose = () => { setOpen(false); }; const handleClick = useCallback( (event: MouseEvent<H ...

javascriptmaterial-uipopover