Save this text in HTML format to the clipboard without including any styling

When using this code to copy a htmlLink to the clipboard:

    htmlLink = "<a href='#'>link</a>";
    var copyDiv = document.createElement('div');
    copyDiv.contentEditable = true;
    document.body.appendChild(copyDiv);
    copyDiv.innerHTML = htmlLink;
    copyDiv.unselectable = "off";
    copyDiv.focus();
    document.execCommand('SelectAll');
    document.execCommand("Copy", false, null);
    document.body.removeChild(copyDiv);

After pasting into a tinyMCE text editor, unwanted styles are applied:

<a style="box-sizing: border-box; color: #1bc5bd; text-decoration-line: none; background-color: #f3f6f9; transition: color 0.15s ease 0s, background-color 0.15s ease 0s, border-color 0.15s ease 0s, box-shadow 0.15s ease 0s, -webkit-box-shadow 0.15s ease 0s; font-family: iransans, tahoma; font-size: 13px; outline: 0px !important;" href="#">link</a>

These styles are coming from public website css classes that I do not want.

How can I remove these unwanted styles?

javascripthtmljquerycssclipboard

Answer №1

I made adjustments to my code and successfully resolved the issue.

    newLink = "<a href='newlink.html'>click here</a>";
    function copyContent(event) {
        event.clipboardData.setData("text/html", newLink );
        event.clipboardData.setData("text/plain", newLink );
        event.preventDefault();
    }
    document.addEventListener("copy", copyContent);
    document.execCommand("copy");
    document.removeEventListener("copy", copyContent);

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

Determine the number of times a specific field value is recurring in a MySQL

Looking for information on the games table structure: `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL, `content` text COLLATE utf8_unicode_ci, `team1ID` int(7) unsigned DEFAULT NULL, `team ...

jquerymysqlsql

Display a loading symbol during task execution

I currently have a link on my control panel that, when clicked, calls an action in my controller. <%= link_to "Enviar Correos".html_safe, {:controller => "users", :action => "email_all_users"}, :method => "get", :html => {:style => "col ...

ajaxruby-on-rails-3jqueryruby-on-rails-3.2

Using a conditional statement to wrap a react Route

Currently, I am facing a challenge while working with react router. Initially, I had two distinct components being rendered under the same route - one with a parameter and one without (this was how the routes were distinguished). Now, my goal is to add opt ...

javascriptreactjsreact-routerreact-router-dom

Updating template views in Grails without the use of ajax enables seamless and dynamic

In my GSP template, I am looking to provide the user with updates on the progress of a task within an overlay. Once the user submits their data, the controller triggers a service to carry out the task. Simultaneously, another service calculates the percen ...

jqueryajaxtemplatesgrailsgsp

Transitioning backgrounds in a slideshow

I am attempting to create a unique slideshow effect for my page background by changing the image URL at specific intervals with a smooth fade in and fade out transition. However, I am faced with the challenge of figuring out the best way to achieve this. ...

htmlcssurlbackground

Generate a D3.js vertical timeline covering the period from January 1, 2015 to December 31, 2015

I am in need of assistance with creating a vertical timeline using D3.js that spans from the beginning of January 2015 to the end of December 2015. My goal is to have two entries, represented by colored circles, at specific dates within the middle of the t ...

javascriptd3.jstimeline

Try incorporating the <code> tags or a similar method in ReactJS when using JSX

I've been experimenting with ReactJS and JSX to develop a prototype for a styleguide. One issue I encountered is that JSX seems to be ignoring my <code> tags, instead of displaying the raw HTML code needed to call components. Here's what ...

htmlreactjsblockquote

Handlers for adjustments not correctly updating values in introduced object

I am facing an issue with a table that displays data fetched from an API and a select dropdown. Whenever a checkbox is selected, the name key along with its value is added to an array object named selectedFields. checkbox = ({ name, isChecked }) => { ...

javascriptreactjs

What is the best way to input keys without losing focus?

I am facing an issue with an HTML <input> field that displays autocomplete suggestions while the user is typing. I want to create an automated test using Selenium, where the driver inputs keys and then verifies the contents of the autocomplete dropdo ...

pythonhtmlseleniumselenium-webdriver

Centering Text and Image in React Horizontally

I'm attempting to achieve a layout similar to the one shown in the image below. Currently, my image is positioned at the top with the text below it. I would like to arrange it so that the text appears on the right side of the image. Please take a loo ...

cssreactjsmaterial-uiflexboxjss

Execute the npm command to organize the files in case the specified directory does

I am facing an issue with my npm package.json script that needs to be executed only when the dist folder is not present. Here is the snippet from my package.json: "scripts": { "predev": "! test dist && webpack --config=webpack.dll.config.js } ...

javascriptnpmpackage.json

How to incorporate template literals when sending JSON responses in Node.js?

Utilizing express and aiming to return some JSON, I am considering using a template literal. Here is my current approach: resp.status(201).json({ message: "Customer added to database", url: "http://localhost:5000/Customer/" + doc._id ...

javascriptjsonnode.jsexpress

Are you harnessing the power of Ant Design's carousel next and previous pane methods with Typescript?

Currently, I have integrated Ant Design into my application as the design framework. One of the components it offers is the Carousel, which provides two methods for switching panes within the carousel. If you are interested in utilizing this feature using ...

javascriptreactjstypescriptantd

Setting Up AdminLTE Using Bower

Recently, I decided to incorporate the Admin LTE Template into my Laravel project. I diligently followed the guidelines outlined here As soon as I entered the command: bower install admin-lte The installation process seemed to start, but then the ...

javascriptnode.jslaravelboweradminlte

Is there a method available to streamline the process of generating .json files for language translations?

Working with translation files can be a tedious task, especially when adding new keys for different languages. Making sure that each key is included in all the JSON files can lead to errors and repetitive editing. Is there a more efficient way to handle t ...

javascriptjsonangularjspowershellangular-translate

How can I extract the minimum price from this array list using Reactjs?

In my ReactJS project, I have an array list structured like this. I am trying to find the minimum price from this list. For example, if 'totalll' is 100, how can I achieve that? Please advise on how to navigate through the array to retrieve the i ...

javascriptreactjs

Setting a single value for several identifiers within a JSON object

I'm new to JSON and I'm curious if it's possible to have a name/value pair with multiple names. Essentially, I want to be able to search for either name and retrieve the same value without having to update the value in two different places. ...

javascriptjson

"Transcribe as HTML" for embedded IFrame components within Chrome's Inspector tool

When using Chrome's web inspector, there is a helpful "Copy as HTML" option when you right-click on a DOM element. However, it seems that this feature does not include the contents of IFrame tags, even though they are displayed in the inspector as chi ...

htmlgoogle-chromedomiframegoogle-chrome-devtools

In relation to User Interface: Analyzing target tracking and studying the flow of time

Is there a way to track mouse cursor movements, button clicks, and click times to an external database using only CSS, HTML5, and Javascript? I am curious about the possibility of conducting usability studies in this manner. ...

javascriptcsshtmltrackingusability

Focusing on the final (but not ultimate) elements within a specified tag

I am facing a challenge with an HTML structure containing multiple instances of a certain element along with two p elements beneath each: <some_tag></some_tag> <p></p> <p></p> <some_tag></some_tag> <p> ...

javascripthtmlcss