Copy HTML to clipboard
Question
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="en">
<head>
<meta charset=utf-8>
<title></title>
<link rel="stylesheet" href="stylesheets/style.css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></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(",")
breakpoints = [int(bp) for bp in breakpoints]
tmp = '<pre class="code">'
lines = code.split("\r\n")
counter = 1
for line in lines:
breakpoint = ""
if counter in breakpoints:
breakpoint = 'class="breakpoint"'
tmp += "<code {}>{}</code>\n".format(breakpoint, line)
counter += 1
tmp += "</pre>"
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.
Could you help me understand why this situation occurs and cope with the problem of copying HTML documents.
1 answers
solution1
1 ACCPTED 2020-05-31 18:32:20
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 ie
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.