angular js zeroclipboard 复制 html

Question

我正在尝试为 html link 创建一个复制按钮。我希望用户单击按钮并加载 html（如 'text/html'），当粘贴到电子邮件或 Word 文档中时，它呈现为 HTML link 而不是全文 link.

即我想显示 mywebsite.com 而不是

<a href=http://www.mywebsite.com>mywebsite.com</a>

复制时。

我正在使用 angular JS 和 Zeroclipboard (angular-zeroclipboard.js) 这是我的代码： controller.js

var app = angular.module('myApp', ['zeroclipboard']);

app.config(['uiZeroclipConfigProvider', function(uiZeroclipConfigProvider) {
// config ZeroClipboard
uiZeroclipConfigProvider.setZcConf({
  swfPath: 'assets/javascripts/vendor/ZeroClipboard.swf'
});
}]);

我的 HTML 文件：

 <button ng-show="!copiedHTML" class="btn btn-SwBLUE space hidden-xs" ui-zeroclip zeroclip-copied="copiedHTML=true" zeroclip-on-error="clipError($event)" zeroclip-text="<a href='http://www.mywebsite.com/page_id=3'>http://www.mywebsite.com</a>"><span class="glyphicon glyphicon-duplicate"></span> Copy HTML Text</button>

 <script src="javascripts/vendor/ZeroClipboard.js"></script>
<script src="javascripts/vendor/angular-zeroclipboard.js"></script>

知道如何设置复制文本的 MIME 类型吗？非常感谢！

Answer 1

好的，终于用ng-clip搞定了。在这个脚本中，我使用相同的指令来复制纯文本和 HTML 文本。我在指令标签中设置了一个 mime 类型。这些按钮变为绿色并带有 OK 字形（使用 bootstrap），持续 2 秒，然后恢复正常。它是这样的：

将 JS 添加到您的 HTML 文件中：

<script src="javascripts/vendor/ZeroClipboard.js"></script>
<script src="javascripts/vendor/ng-clip.min.js"></script>

向您的 JS 控制器添加指令：

var app = angular.module('myApp', ['ngClipboard']); 

[...]   

app.directive('copyButton', function ($timeout) {
    return {
        restrict: "E",
        scope: {
                    content: '@',
                    mimeType: '@',
                    innerText: '@',
                    class: '@'
                },
        template: '<button type="button" class="btn btn-SwBLUE space hidden-xs" clip-copy="content" clip-click="clipped()" data-clip-copy-mime-type="{{mimeType}}"><i class="glyphicon glyphicon-duplicate"></i> {{innerText}} </button>',
        link: function ($scope, element, attrs) {
            if(!$scope.mimeType){
                $scope.mimeType = "text/plain";
                $scope.innerText = "Copy TEXT "
            }else {
                $scope.innerText = "Copy HTML"
            }

            var toggleButton = function(element){
                angular.element(element.find('button')[0]).toggleClass("btn-SwBLUE");
                angular.element(element.find('button')[0]).toggleClass("btn-success");
                angular.element(element.find('i')[0]).toggleClass("glyphicon-duplicate");
                angular.element(element.find('i')[0]).toggleClass("glyphicon-ok");
            };

            $scope.clipped = function(){
                toggleButton(element);
                $timeout(function(){ toggleButton(element); }, 2000);
            };
        }
    };
});

并在我的 HTML 中使用它：

<copy-button class="hidden-xxs" content="<a href=www.mywebsite.com?page=321>mywebsite.com</a>" mime-type="text/html"></copy-button>

很酷，不是吗？ :D

angular js zeroclipboard 复制 html

angular js zeroclipboard copy html

zeroclipboard

angularjs