Question

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

即。我想展示mywebsite.com而不是

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

复制时。

我正在使用角度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-type。这些按钮变为绿色，带有OK字形（使用引导程序）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

角js zeroclipboard复制html

1 个答案: