Preventing DIV Selection in TinyMCE with IE9 using Width/Height and ContentEditable

When working with TinyMCE (3.5.4.1) on IE9, an issue arises when a DIV with specified Height and/or Width is placed in the content. In such cases, IE treats it as a contenteditable DIV to some extent.

This results in the DIV getting highlighted when the user first clicks on the editor to edit the document in TinyMCE. Users can accidentally move the DIV and then have to click again to actually edit the content inside it, all while the distracting outline of the DIV remains visible on the page.

Several posts have mentioned that IE triggers the "controlselect" event in this scenario, suggesting placing the cursor within the content and returning false. While this approach initially suppresses the selection of content, subsequent clicks within the content appear to behave inconsistently.

Is there a dependable method to make IE handle this situation more consistently, similar to other browsers, without any unexpected side effects when height/width are added to a DIV?

javascriptinternet-explorertinymce

Answer №1

I've managed to make it work for the most part, you can check it out here

Also, take a look at this other link

It's not flawless, but it seems like the best solution available.

Answer №2

If you encounter this problem, consider utilizing the object_resizing configuration setting in your tinymce initialization

object_resizing: false,

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

Removing values in javascript for checkboxes that are not selected

Here is the JavaScript Code : var clinicalStat; var id; var val; var clinicalVals; $(":checkbox").click(function() { //alert(" you checked"); if ($(this).is(':checked')) { var checked1 = $(this).val(); //Inital value of check ...

javascriptjquerycheckbox

Evolution of table size

I have a table that needs to expand smoothly when a certain row is clicked. I want to add a transition effect for a more polished look. Here's my test table: <div ng-app="app"> <table> <thead ng-controller="TestController" ...

javascriptangularjscss-transitions

In MongoDB, rather than storing hashed passwords, it stores a "Promise" object

I've implemented bcrypt for hashing passwords and MongoDB for my database storage. Check out the code snippet below: export default function buildMakeUser({pwdHasher}) { return function makeUser({ username, email, passwor ...

javascriptnode.jsmongodbbcrypt

What is the best way to apply multiple conditions when filtering a nested array of objects?

In the array of objects provided below, I want to filter them based on the criteriaType, id, and source. If none of the input sources match, the parent object should be filtered out. It's important to note that all filter criteria are optional. [{ ...

javascriptnode.jsecmascript-6

Having trouble running nodemon on my Windows 10 machine

Recently, I started diving into Node.js and managed to run my first node app successfully, albeit without using nodemon. To remedy this, I globally installed nodemon by running npm install -g nodemon, which went smoothly. However, upon executing nodemon in ...

javascriptjsonnode.jsnpmnodemon

`Save user edits on the webpage using Electron`

I am encountering an issue with my electron app. I use the window.loadUrl() method to navigate between pages. Some of these pages require users to input data that needs to be saved. The problem arises when a user enters information, moves to another page ...

javascriptnode.jsangularjselectron

Is it possible to create a dynamic, live-updating list using Node.js and Firebase?

I am currently working on creating a real-time list using Firebase and Node.js. Below is the code that I have implemented: router.get('/', (req, res) => { db.ref('contacts').on('value', (snapshot) => { const ...

javascriptnode.jsfirebasefirebase-realtime-database

Tips for sorting through the state hook array and managing the addition and removal of data within it

Having trouble finding a solution for filtering an array using the React useState hook? Let me assist you. I have declared a string array in useState- const [filterBrand, setFilterBrand] = useState<string[]>([]); Below is my function to filter this ...

javascriptreactjstypescriptnext.js

unable to retrieve the chosen item from the dropdown menu

How can I retrieve the value of the selected item from a dropdown menu without getting an undefined error? You can find my code on Jsfiddle. Can anyone spot what might be causing this issue? <select class="ddl_status" id="status_ddl_20" style="display ...

javascriptjquery

Loop through each iteration within JavaScript and ensure to reset the console after completing each

My current project involves working with code that runs on Node.js to log the values of the object below. Each value is logged with a one-second delay between iterations, and concatenated with the string "you are now watching". const episodes = [ { id: ...

javascriptnode.jsloops

Enhancing the Appearance in Internet Explorer 7

Recently, I decided to check my client's new website on my BrowserStack account. I'm not very experienced in developing for older browsers, but I wanted to make sure the website was at least viewable on them. I tested it on Windows XP with IE 7. ...

cssinternet-explorer

I am uncertain about whether it would be better to utilize URL path parameters or query parameters for filtering on the back-end of the application

Suppose I am trying to retrieve all car models from a specific brand. This can be achieved by utilizing URL path parameters or query parameters as shown below: router.get('/modelsByBrand', modelController.getModelsByBrand); To make the GET reque ...

javascriptnode.jsexpress

Minimize the length of the styled-component class name in the upcoming iteration

Dealing with styled-components in Next along with React can pose a challenge when it comes to ensuring proper rendering of the styled components. To tackle this issue, Next offers the compiler.styledComponents flag within the next.config.js file like so: c ...

javascriptreactjsnext.jsstyled-components

using ajax to repopulate a multi-select form with a drop-down form

Looking to dynamically repopulate a multiple select form from a database using AJAX based on the selection of a drop-down value. Below is the code for the drop-down menu: <?php $sql2 = "select _id, title from sub_category order by title;"; ...

javascriptphpjqueryajaxforms

When trying to run ionic serve, I encountered the following error: "[ERROR] ng has unexpectedly closed with an exit code of 127."

My attempt to launch an ionic app on my Mac has hit a roadblock. While running npm install for the dependencies, everything goes smoothly without any issues. However, when I try to run 'ionic serve' or 'ionic s', an error crops up: [ng] ...

javascriptangulartypescriptnpmionic-framework

How can I display milliseconds from a date in Angular2+?

I recently encountered an issue while working with a custom pipe that was used to display time. I attempted to modify it so that it could also show milliseconds: {{log.LogDate|jsonDate|date:'dd.MM.yyyy &nbsp; HH:mm:ss.sss'}} Here is the cod ...

javascriptangulardatetimepipemilliseconds

What is the best way to set the sidebar height to 100% in Material-UI?

Trying to learn MUI and encountered a problem. I want the sidebar to cover the full height, I tried 100vh but it stops increasing when the table extends. Using 100% only covers the end of the list. Is there another way to solve this, or is it fine becaus ...

javascriptreactjsmaterial-ui

A guide on navigating full images using CSS

I am searching for a code that will enable scrolling through entire images on my landing page. It is a bit challenging to explain, but it is similar to the style of scrolling on tesla.com. Each scroll of the mouse wheel moves down one complete image. Can ...

javascripthtmlcss

Implementing AJAX requests in jQuery DataTable with ASP.NET MVC

For some time now, I have been using the jQuery DataTables 1.10.13 plugin. Recently, I encountered an issue related to the ajax data source for my HTML table. This is how I initialized jQuery DataTable inside Files.cshtml <script language="javascript" ...

javascriptjqueryajaxasp.net-mvc

AngularJS allows for the passing of a function value into another function

Is there a way for me to pass a value from one function to another? Here is an example of what I am trying to achieve: HTML <div> <li ng-repeat="language in languages" ng-click="myFirstFunction(firstValue) {{lang ...

javascriptangularjs