TinyMCE removes the class attribute from the iframe element

I am trying to specify certain iframes by using a class attribute to adjust the width using CSS.

The iframes I am working with are google maps embeds, similar to this one:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/?ie=UTF8&amp;t=m&amp;ll=52.8382,-2.327815&amp;spn=4.646012,9.338379&amp;z=6&amp;output=embed"></iframe>

These iframes are copied and pasted into the HTML source editor of tinyMCE. However, I am facing an issue where the class attribute is being removed when I click update on the source editor.

I have attempted to use both valid_elements and extended_valid_elements in the configuration settings, but neither seem to work for iframe[class].

I am currently using version 3.4.3 of tinyMCE. Upon downloading version 3.5.7, I noticed that the same problem persists. This behavior can also be seen on the demo on the tinyMCE website despite claims in the documentation that the class attribute is supported.

Below is the full configuration code:


tinyMCE.init({
    // General options
    mode : "specific_textareas",
    editor_selector : "formInputWysiwyg",
    theme : "advanced",
    plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,wordcount,advlist",

    // Theme options 
    ... (remaining config details) ...
    style_formats : [
        {title : 'Google Maps', selector : 'iframe', classes : 'google-maps-embed'},
        {title : 'Intro', selector : 'p', classes : 'intro'},
        {title : 'News Image', selector : 'img', classes : 'news-image'}
    ],
});
htmlcsstinymce

Answer №1

By making a crucial adjustment in \tinymce\jscripts\tiny_mce\plugins\media\editor_plugin_src.js, the problem was successfully resolved. The key change involved eliminating the "class" attribute from the rootAttributes on line 12, followed by minifying the code using jscompress.com and substituting the contents of the editor_plugin.js file located in the same directory.

Modified Section:

 var rootAttributes = tinymce.explode('id,name,width,height,style,align,class,hspace,vspace,bgcolor,type')

Revised to:

 var rootAttributes = tinymce.explode('id,name,width,height,style,align,hspace,vspace,bgcolor,type')

The issue persisted in version 3.5.8, prompting me to report it as a bug.

Answer №2

Is the 'media' plugin activated on your system? I'm encountering a similar issue and suspect that the media plugin may be causing interference with the editor's functionality on HTML elements. I attempted to use a style_formats option to adjust the iframe, but unfortunately, it didn't resolve the problem.

Answer №3

If you are facing issues with the media plugin conflicting, but still require its functionality, you can resolve the conflict by adding the following option in the tinymce initialization settings:

media_live_embeds: false

This solution has been successfully tested on tinymce v4.6.1

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

Change background according to URL query

My goal is to dynamically change background images based on a URL parameter, specifically the destination code. With numerous background images available, it's crucial to display the correct one depending on the URL string. For instance, if the URL re ...

javascriptjquerycssimage

Using Selenium in Python, loop through webpages to extract the search result position

Currently, I am using a script to search for a generic keyword and determine the rank of my products on an e-commerce platform. The code below has been working successfully in fetching the product ranks on the first page. from selenium import webdriver dr ...

pythonhtmlselenium

Expanding the clickable area of a link using the CSS :before pseudo-element selector

I am currently working on a project involving an image slider and I am facing a challenge with the "previous" and "next" arrows. My goal is to have each arrow occupy half of the slider area, but adjusting padding or margins tends to change their position o ...

htmlcssz-index

Using AngularJS to apply custom css to a tag within a directive for creating a Bootstrap sticky footer

Currently, I am in the process of developing my very first AngularJS application with Bootstrap as the responsive framework. In order to achieve a sticky footer, I usually utilize jQuery to determine the outerHeight of the footer and then apply that value ...

htmlcssangularjsangular-ui-bootstrap

managing the action of a form to launch it with the help of facebox

Is there a way to use facebox to display a contact form and have the submit action also open in a facebox? Currently, I can easily open a link in a facebox using the rel attribute, like this: <a href="contact.html" rel="facebox">Contact</a> W ...

phpjqueryhtmlcssfacebox

Looking to replace a background image using javascript?

(apologies for any language mistakes) I have multiple divs with a common background image. I assigned them the same class and set the background image using CSS in style.css which worked perfectly fine. Now, I want to change the background image dynamical ...

javascriptcssbackground-image

The CSS background-image fade transition is optimized for Chrome browsers

HTML: <a class="navbar-brand page-scroll" href="#intro"></a> CSS: .navbar-custom .nav li a.navbar-brand { width: 70px; height: 62px; background: url(myimg.png) no-repeat; background-size: 70px 62px; display: block; po ...

htmlcsscross-browsercss-transitions

How can a JavaScript code be used to navigate to a different HTML file within the same directory that is stored within a folder?

Here is the sample HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

javascripthtmlhttp-redirect

What is the best way to bring a background image to the forefront?

I am currently working on creating a list of "fake videos" which are essentially images with a play icon on them. My plan is to use the play icon as a background and bring it to the front of the image by adjusting the z-index. However, no matter what I try ...

css

What are the possible complications that could arise from implementing this system for designing web pages?

Feeling frustrated with the limitations and compatibility issues of CSS, I decided to create a new approach for structuring webpages. Instead of relying on CSS, I developed a javascript library that reads layout instructions from XML files and uses absolut ...

javascriptcssweb-applications

Retrieve Image Data by Clicking on Canvas at Precise Coordinates

JS Fiddle Link I'm attempting to implement functionality where a canvas with a linear gradient can be clicked, capturing the image data at that specific point. Additionally, I aim to position a yellow picker relative to the click point on the canvas ...

jquerycsshtml5-canvasgetimagedata

Enhancing the efficiency of a JavaScript smooth scrolling feature for numerous listed items

I have been experimenting with recreating the recent Apple Mac retrospective using only CSS and JavaScript to create a small timeline of projects. While I have successfully implemented the layout for the full-screen hero and the expand-on-hover effect, I a ...

javascripthtmlcssperformancescroll

The scrolling element mirrors the movement of the scrolling window

Can you help me understand how to create a scrolling element that follows the scrolling of the window? I want the element to scroll down when the window reaches the end, and scroll up when the window is at the top. I tried implementing this functionality ...

jqueryhtmlcssscroll

PHP is having trouble identifying the file extension for file uploads

After sending an array through AJAX and echoing it in PHP, I have the following data: [file] => Array ( [name] => XXXX.jpg [type] => image/jpeg [tmp_name] => D:\xampp\tmp\phpC5F2.tmp [error] => 0 [size] = ...

phphtmlajaxpdf

Python and website submission button without an action attribute

I'm currently working on a Python program that interacts with an online store. So far, I've successfully located the desired item and accessed its page using BeautifulSoup. However, I'm struggling with clicking the "Add to cart" button. Most ...

pythonhtmlbeautifulsoupform-submitrobobrowser

Is nesting possible with the &:extend function in LessCss?

I've recently been exploring the Less &:extend feature. My goal is to nest multiple extends - essentially extending a class that itself extends another class. However, after testing it out, I'm not sure if it's working as expected. It ...

cssless

The controller is referencing $rootScope which has not been properly defined

Here is my understanding of the controller concept. Whenever I launch the application, an error message appears saying "$rootScope is not defined." Can someone provide assistance in identifying the issue? var webadmin = angular.module('PcPortal' ...

javascripthtmlangularjs

Innovative ways to design a responsive carousel with Bootstrap

My goal was to create a slider with divisions inside a bootsrap carousel, and here is what I did. However, I am looking for guidance on how to adjust it so that on screens smaller than sm (of bootstrap), there are only two divisions in one carousel, and a ...

javascripthtmljquerycssbootstrap-5

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting ...

javascripthtmlcssajax

Offset & Centralized Container using Bootstrap

I am currently attempting to center the header and input field using bootstrap. Unfortunately, I am facing an issue where I cannot get the input field to align properly with the header. If anyone has an alternative method for achieving this alignment, I ...

htmlbootstrap-4