CODEWITHSUNDEEP
textareaangular-ngmodelniceditob-get-contents
K. Gratiot
K. Gratiot

Reputation: 31

How to get nicEdit textarea content in ng-model?

I'm new in Angular and html development. So i don't know yet all features and code terms.

I created a form which contains a rich textarea field. I used nicEdit as this is the one recommended by mycompany (so cannot change of editor). As you can see in the image below, nicEdit is working well.

But when I want to get the field content in ng-model, it doesn't work. Most of forum Q&A informs that that ng-model does not working properly with that nicEdit textarea. I found something about a directive to create. So I tried by modifying one dedicated to ckEditor. But it doesn't work. I found that $('div.nicEdit-main') was the div updated (but not my field htmlLondDesc attached to the nicEdit textarea, neither the ng-model).

I also found something about the nicEditors.findEditor('htmlLongDesc').getContent(); but i don't know where to use it in the ng-model...

So how to get the content of nicEdit and save it in ng-model ? Thanks in advance for your help.

Here is an image of the text area Here is my js and html code:

scApp.directive('ncGetContent', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attr, ngModel) {
          var content = $('div.nicEdit-main').html();
          if (!ngModel) return;
          content.on('instanceReady', function () {
            content.setData(ngModel.$viewValue);
          });
          function updateModel() {
            scope.$apply(function () {
              ngModel.$setViewValue(content.getData());
            });
          }
          content.on('change', updateModel);
          content.on('key', updateModel);
          content.on('dataReady', updateModel);
    
          ngModel.$render = function (value) {
            content.setData(ngModel.$viewValue);
            
          };
        }
      };
    });
 
  <head>
    <script type="text/javascript">
    bkLib.onDomLoaded(function() {
    var myEditor = new nicEditor({buttonList : ['bold','italic','underline','subscript','superscript','forecolor','bgcolor']}).panelInstance('htmlLongDesc');
    var nicInstance = nicEditors.findEditor('htmlLongDesc');
    });
    </script>
 </head>
 
 ...
 
  <textarea id="htmlLongDesc" cols="140" rows="6" name="htmlLongDesc"  ng-model="user.htmlLongDesc" ncGetContent ></textarea>

Upvotes: 1

Views: 519

Answers (0)

Related Questions