Tuesday, September 26, 2017

Unable to paste text content into contenteditable div

I had to add a custom contenteditable directive for a div because it was required by another directive I was using on that div. But after I added contenteditable, copy/paste (specifically pasting) has stopped working.

I tried ng-paste on the div, and also tried adding an element.on('paste') listener in the contenteditable directive to see if I could capture the paste event manually, but it never gets triggered. Any idea how I could get pasting content into a contenteditable div working?

<div contenteditable autocomplete-dropdown></div>

.directive('contenteditable', ['$sce', function($sce) {
        return {
            restrict: 'A', 
            require: '?ngModel', 
            link: function(scope, element, attrs, ngModel) {
                function read() {
                    var markup = element.html();
                    if (attrs.stripBr && markup === '<br>') {
                        markup = '';
                    }
                    ngModel.$setViewValue(markup);
                }

                if (!ngModel) {
                    return;
                } 

                ngModel.$render = function() {
                    if (ngModel.$viewValue !== element.html()) {
                        element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
                    }
                };

                element.on('blur keyup change', function() {
                    scope.$apply(read);
                });

                read(); 
            }
        };
    }]);

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/09/26/unable-to-paste-text-content-into-contenteditable-div/
via @lzomedia #developer #freelance #web

No comments:

Post a Comment