如何在django admin中为选定的字段制作“复制到剪贴板”按钮/链接？

Question

我使用经典的Django Admin面板。我想为模型中的字段添加按钮/链接。

最简单的方法是什么？

Answer 1

让我向您展示如何使用Javascript在Django管理员的字段旁边显示一个按钮。

首先，您需要知道该字段的HTML元素id。要知道id Chrom / Firefox中的元素：右键单击输入字段＆gt;检查元素。

假设我的模型中有一个名为name的字段， 由Django管理界面分配的HTML元素id将为id_name

因此，如果我想在它旁边显示一个按钮，我会编写这个JS脚本：

var $ = django.jQuery;

$(document).ready(function() {
    var myButton = '<button>Copy</button>';
    $(myButton).insertAfter($('#id_name'));
});

将此文件保存在项目的/static/文件夹中。我把它命名为show-copy-btn.js。

然后使用class Media将此文件提供给模型管理员的添加/更改页面，如下所示：

class MyModelAdmin(admin.ModelAdmin):
    ...
    class Media:
        js = ('show-copy-btn.js',) 
        # above path is equivalent to /static/show-copy-btn.js
        # if your file in /static/js/ folder, the path above should 
        # be 'js/show-copy-btn.js'

如果您打开模型的添加/更改管理页面，接下来会看到一个按钮 到期望的领域。虽然，按钮可能看起来有点难看，但我相信你可以通过一些CSS魔术使其变得漂亮。

希望这个答案能让你开始。在此之后，您可以编写实际“复制到剪贴板”功能的JS代码，并将该代码传递给Django管理员，就像我在上面展示的那样。

注意：此答案未向您显示如何将文本复制到剪贴板。它只向您展示如何使用JS在Django管理员中显示字段旁边的按钮。

Answer 2

今天我偶然发现了这个问题和上面的 xyres answer。但是，我没有包含静态文件（这可能会导致其他问题，例如有两个不同的目标），而是考虑了方法字段样式并想出了这个：

from django.utils.safestring import mark_safe


class AttachmentAdmin(admin.ModelAdmin):

    .
    .

    readonly_fields = (
        'options',
    )

    def options(self, obj):
        btn_id = 'copy-helper'
        return mark_safe(f"""
            <input text="text" id="{btn_id}" value="{obj.media_url}" style="position: absolute; top: -10000px">
            <a href="#" onclick="document.querySelector(\'#{btn_id}\').select(); document.execCommand(\'copy\');" class="addlink">Copy media url to clipboard</a>
            """
        )
    options.short_description = _('Options')

这导致：

通过这种方式，可以轻松自定义外观，如果需要，可以扩展 javascript 以首先通过查询选择器从其他 html 标签中获取输入（type="text"）字段值。

希望这对其他人有用。