CODEWITHSUNDEEP
javascript
Michael
Michael

Reputation: 4471

Copy HTML to clipboard

I use a simple third party library to copy something to clipboard.

The something is always some programming code. In these examples it is HTML and Python codes.

<button id="copy-code-sample-3" data-code-sample-id="3" data-clipboard-text="<!DOCTYPE html>
<html lang=&quot;en&quot;>
<head>
  <meta charset=utf-8>
  <title></title>
  <link rel=&quot;stylesheet&quot; href=&quot;stylesheets/style.css&quot;></style>

  <script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;></script>
  <script src=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js&quot;></script>
</head>
<body>

</body>
</html>" class="code-sample-button">Copy (fail)</button>

<button id="copy-code-sample-1" data-code-sample-id="1" data-clipboard-text="from django import template
from code_sample.models import CodeSample
from django.utils.html import mark_safe
from general.const import CSS, SCRIPTS

register = template.Library()

class CodeSampleManager():
    def __init__(self, code_sample_obj: CodeSample):
        self.code_sample_obj = code_sample_obj

    def prepare_code(self):
        code = self.code_sample_obj.body
        breakpoints = self.code_sample_obj.breakpoints
        breakpoints = breakpoints.split(&quot;,&quot;)
        breakpoints = [int(bp) for bp in breakpoints]

        tmp = '<pre class=&quot;code&quot;>'

        lines = code.split(&quot;\r\n&quot;)
        counter = 1


        for line in lines:
            breakpoint = &quot;&quot;

            if counter in breakpoints:
                breakpoint = 'class=&quot;breakpoint&quot;'

            tmp += &quot;<code {}>{}</code>\n&quot;.format(breakpoint, line)
            counter += 1
        tmp += &quot;</pre>&quot;
        return tmp" class="code-sample-button">Copy (success)</button>

<script type="text/javascript" src="https://milankyncl.github.io/jquery-copy-to-clipboard/jquery.copy-to-clipboard.js"></script>

In short: whatever is placed in data-clipboard-text attribute of a button, will be copied to the clipboard.

Please, press a Copy button in the example and insert into a text editor what there is in the clipboard.

Documentation to the third party library: https://milankyncl.github.io/jquery-copy-to-clipboard/

https://jsfiddle.net/Nonverbis/nzx7dvm8/12/

Copy (fail) button copies the contents of its data-clipboard-text but it consists only of whitespace characters and line breaks.

Morever, when I run this at my localhost, I get this error after clicking the fail button:

Refused to apply style from 'http://localhost:8000/draft/linux/install-os-ubuntu/stylesheets/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

The reason seems that HTML is considered to be a real HTML. The browser looks for sources, fails and sends the error. But for my purpose this is just a string.

enter image description here

Could you help me understand why this situation occurs and cope with the problem of copying HTML documents.

Upvotes: 0

Views: 454

Answers (1)

nmanikiran
nmanikiran

Reputation: 3158

The Error

Refused to apply style from 'http://localhost:8000/draft/linux/install-os-ubuntu/stylesheets/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Is self-explanatory i.e

strict MIME checking is enabled from the plugin so if you remove link and script tag then it will work because of security issue MIME check is good practices.

Upvotes: 1

Related Questions