Question

将 HTML 复制到剪贴板

2020-05-31

435

javascript

我使用一个简单的第三方库将某些内容复制到剪贴板。

某些内容始终是一些编程代码。在这些示例中，它是 HTML 和 Python 代码。

<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>

简而言之：按钮的 data-clipboard-text 属性中放置的任何内容都将被复制到剪贴板。

请按示例中的复制按钮，并将剪贴板中的内容插入文本编辑器中。

第三方库的文档： https://milankyncl.github.io/jquery-copy-to-clipboard/

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

复制（失败）按钮复制其数据剪贴板文本的内容，但其中仅包含空格字符和换行符。

此外，当我在本地主机上运行此程序时，单击失败按钮后出现此错误：

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.

原因似乎是 HTML 被视为真正的 HTML。浏览器查找源，失败并发送错误。但对于我的目的而言，这只是一个字符串。

您能帮助我了解为什么会发生这种情况并解决复制 HTML 文档的问题吗？

Answer 1

错误

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.

是不言自明的，即

已从插件中启用严格 MIME 检查 ，因此如果您删除 link 和 script 标签，那么它将起作用，因为安全问题 MIME 检查是很好的做法。