Issues have arisen with the functionality of noneditable contents in tinymce

I am currently using the tinyMCE editor and I need to make certain content readonly (nonEditable).

According to the documentation, if I apply the class "mceNonEditable" to specific elements, it should meet this requirement. However, when I select that element and press backspace / Enter / Delete, the content is removed.

My goal is to prevent any user interaction with these elements at all.

You can view an official example here.

In an attempt to solve this issue, I also tried utilizing an overlay div with absolute positioning. Unfortunately, applying this style causes the editor to treat the div as draggable.

If anyone has alternative solutions or suggestions, please share!

javascripttinymcetinymce-4

Answer №1

My discovery is that by setting the contentEditable attribute to false for the specific element, it effectively resolves the issue.

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

The initial render of Keen-slider in NextJS can sometimes encounter difficulties when using server-side rendering

While incorporating the keen-slider library v5.4.0 into my nextJS project with TypeScript, I encountered a peculiar issue. The error arises when the keen-slider is initially loaded for the first time, resulting in mismatched transform types causing items ...

javascriptreactjsnext.jsslider

Nested Tables in JavaScript: Creating Tables within Tables

Recently, I have been analyzing student data and noticed a recurring structure. While preparing to present information on student performance within the discipline, I also became interested in showcasing a history of new students. It was suggested that hav ...

javascriptcsstreeviewsyncfusiontreetable

Obtaining your CSGO inventory via Steam API using jsonp: A step-by-step guide

Hey there! I'm currently facing an issue while trying to access a player's CSGO inventory using Valve's API. Unfortunately, I keep running into the error message stating that no 'access-control-allow-origin' header is present on th ...

javascripthtmljsonapijsonp

Display PickerIOS when a button is clicked in a React Native application

I am a beginner with the react framework and I'm trying to implement a PickerIOS component on button click. However, I'm having trouble understanding how to call other classes upon an event. I found this code snippet on the React Native site: v ...

javascriptjqueryreactjsreact-native

What is the best way to describe duplicate keys within a JSON array?

I have created a specialized program to extract Dungeons and Dragons data from JSON files. While the main functionality is complete, I am struggling with defining unique keys for multiple attack options without manually assigning individual identifiers. H ...

javascriptnode.jsjson

Switch the functionality of a Google Chrome extension back and forth numerous times

My Google Chrome extension works by attaching event listeners to all elements on a page and inserting CSS (lol.js and style.css) when clicked. However, I am facing an issue where I cannot remove the JS and CSS upon clicking the icon again. Right now, I am ...

javascriptjquerygoogle-chrome-extension

Notifications for AngularJS tabs

I need help finding a method to incorporate "tab notification" using AngularJS, in order to show that there are important alerts that require attention. For example: (1) (3) TAB_ONE TAB_TWO TAB_THREE Could you provide any recom ...

javascripthtmlcssangularjs

Verifying whether every value in the X array is present in the Y array or not

Currently, I am working with two arrays: const arrA = [1, 2, 3, 4, 5]; const arrB = [1, 2, 3, 4, 5, 6, 7, 8, 9]; My goal is to determine if all elements in array A exist in array B. Here are a few scenarios for better clarity: const arrA = [1, 2, 3, 4, ...

javascriptjqueryarraysvue.jsvuejs2

Issue with Angular 13 Bootstrap5 Navbar's functionality

Angular 13 is my framework of choice, and I recently integrated Bootstrap 5 into my project using the command below: ng add @ng-bootstrap/ng-bootstrap As for the index.js file content, it looks like this: <!doctype html> <html lang="en" ...

javascripthtmlnavbarbootstrap-5angular13

Utilize Ajax to automatically populate a textbox with suggestions

I'm retrieving data via an AJAX call. How can I bind the data for auto-completion in a text box using both the name and ID as fields? What is the best way to bind this data in the frontend and retrieve the selected name's ID in the backend using ...

javascriptjqueryajax

Conceal portion in HTML until revealed

I am attempting to create 3 sections within a single HTML file using the <section id="id"> tag, and I want to be able to open each section by clicking a link in the header with <a href="#id">1</a>, and then close it when another section i ...

javascriptphphtmlcss

In Pure JavaScript, an HTML element is added every time the click event is triggered

Hey everyone, I'm facing a small issue and I could use some help fixing it. I need to implement an onclick event that adds HTML code every time it's clicked. I am hesitant to use innerHTML due to its potential risks. Here is the code snippet: bu ...

javascripthtml

How can you personalize a website script by deactivating it using uBlock Origin and then reintegrating it as a userscript?

Can you imagine if it were possible to address a problematic portion of a script on a website by preventing the original script from loading, copying the source code, editing it, and then re-injecting it as a userscript with Tampermonkey? I attempted this ...

javascriptuserscripts

Is there a method to display HTML content using react-markdown?

I'm currently utilizing tinymce to accept markdown data from users and then converting it into HTML. My goal is to display this data on a webpage using react-markdown. Currently, I am able to view the data on the page, but it is displayed with HTML t ...

reactjsnext.jstinymcemarkdown

Looking to understand how to effectively utilize the ContentProtectionCallback in SHAKA PLAYER?

Could someone assist me in understanding how to pass the ContentProtectionCallback in order to manage the preProcessor of a drm license url for shaka player? [ var manifestUri = '<mpd url>'; function initApp() { // Including nece ...

javascripthtmlmpeg-dashmedia-sourceshaka

Insert a fresh row into the current table

Is it possible to add a new row to an existing table in SAP UI5? Below is the code snippet: onInit: function() { var oModel = new sap.ui.model.json.JSONModel("Model/Clothing.json"); this.getView().setModel(oModel); var table = this.getView(). ...

javascriptmodelsapui5

Tips for saving information to a JSON file in Reactjs

Perhaps the real question should be How can I save data to a JSON file using Reactjs and Nodejs? I'm new to React and unsure about which database to use. On a side note, it's simple to read from a json file with var data = require('./d ...

javascriptjsonnode.jsdatabasereactjs

Mastering the art of simultaneously running multiple animations

Utilizing two functions to apply a Fade In/Fade Out effect on an element. Confident in the functionality of both functions, as testing them sequentially in the Console proves their effectiveness. However, executing: fadeIn() fadeOut() seems to result in ...

javascript

Upgrade from Next.js version 12

Greetings to all! I have recently been assigned the task of migrating a project from next.js version 12 to the latest version. The changes in page routing and app routing are posing some challenges for me as I attempt to migrate the entire website. Is ther ...

javascriptreactjsnode.jstypescriptnext.js

Success callback for tracking conversions on Google

When an ajax call is successful, I am triggering the Google conversion tracking code. Along with tracking the conversion, I also need to change the window location. Is there a method to receive a callback when the conversion tracking is successful, so tha ...

javascriptajaxgoogle-ads-apiconversion-tracking