javascript - 如何使用 contenteditable 属性避免在内联编辑中复制 HTML 和 CSS 内容

Question

在 Inline Edit 中，我们尝试复制粘贴自己的内容，但它会复制 html 内容本身。

请在下面找到屏幕截图:

如何避免复制html内容和样式？

我们只需要复制粘贴内容本身。

DEMO

HTML:

<td><a href="" contentEditable="true" ng-model="fName">John</a></td>

Angular :

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


myApp.directive('contenteditable', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            // view -> model
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ctrl.$setViewValue(elm.text());
                });
            });

            // model -> view
            ctrl.render = function(value) {
                elm.html(value);
            };

            // load init value from DOM
            ctrl.$setViewValue(elm.text());

            elm.bind('keydown', function(event) {
                console.log("keydown " + event.which);
                var esc = event.which == 27,
                    el = event.target;

                if (esc) {
                        console.log("esc");
                        ctrl.$setViewValue(elm.text());
                        el.blur();
                        event.preventDefault();                        
                    }

            });

        }
    };
})

;

CSS:

a[contentEditable] {
  cursor: pointer;
  background-color: white;
    padding: .2em;
}
a[contentEditable]:focus {
  cursor: pointer;
  background-color: #D0D0D0;
    border: 1px solid red;
  padding: .2em;
}

Answer 1

作为选项你可以尝试做:

$('[contenteditable]').on('paste', function (e) {
   var pastedText = undefined;
   if (window.clipboardData && window.clipboardData.getData) { // IE
     pastedText = window.clipboardData.getData('Text');
   } else if (e.clipboardData && e.clipboardData.getData) {
     pastedText = e.clipboardData.getData('text/plain');
   }
   // @see: https://developer.mozilla.org/en/docs/Web/API/Document/execCommand
   document.execCommand('inserttext', false, pastedText);
   return false; // Prevent the default handler from running.
});