Search code examples
angularjswysiwygcopy-pastesummernote

Adding <p> to an unformated text in angular


I am pasting pure text like the follow, just inside a textbox of summernote and process it to remove all html format. but I need to process it again to update the model adding <p> to paragraphs and remove empty lines.

This is what I have

Example Test
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

And...

This is what I need:

<p>Example Test</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<p>Nulla consequat massa quis enim.</p>

This is my view:

<div summernote config="options" ng-model="post.description" on-paste="snPaste(evt)"></div>

And this is the script I am using for pasting:

$scope.snPaste = function(e) {
    //First define the clean content
    var cleanUp = e.originalEvent.clipboardData.getData('text');

    //Have it wait for 0.5 seconds to update the pasted
    setTimeout(function () {
        $scope.$apply(function () {
            $scope.post.description = cleanUp; //Here I update the model.
        });
    }, 500);
};

Solution

  • Here's the result:

    result

    Here's the tweak to your controller:

    angular.module('summernoteDemo', ['summernote'])
      .controller('CodeCtrl', function($scope) {
        $scope.snPaste = function(e) {
          //First define the clean content
          clipboardData = e.originalEvent.clipboardData || window.clipboardData;
          var cleanUp = clipboardData.getData('Text');
    
          //Have it wait for 0.5 seconds to update the pasted
          setTimeout(function() {
            $scope.$apply(function() {
              $scope.post.description = '<p>' + cleanUp.replace(/\r\n\r\n|\n\n/g, '</p><p>').replace(/\r\n|\n/g, '</p><p>') + '</p>'; //Here you update the model.
            });
          }, 500);
        };
      });
    

    Here's a working JSFiddle, http://jsfiddle.net/rekrah/nkosyafs/.