Using Angular WYSIWYG editor

Asked

Viewed 556 times

4

To kind of starting now my studies with Angularjs.

Well, I’m trying to add a WYSIWYG editor ("What You See Is What You Get"). to my script using angular 1.6.1 but am not getting the desired result.

There is a that one question in the OS where they listed a considerable amount of WYSIWYG modules that can be used in the project, what I liked the most (except for the layout and the lack of some features) and found it easy to implement was the Angular Trix.

I wanted to get a result similar to that of nicEdit customizing as in demo-3(to add editing options only when it was clicked on edit) and on demo-5(to change the layout of the area where the text is located).

Using the Angular Trix

In this example below I used Trix, I will add an example trying to implement the nicEdit

var app = angular.module('module', ['ngSanitize']);
app.controller('controller', function($scope) {
  $scope.testes = [{
    "teste": 1,
    "oi": "O que \u00e9 a loren ipsum?",
    "ai": "<ul><li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>   <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li><li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li><li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li></ul>"
  }, {
    "teste": 2,
    "oi": "Disclaimer sobre a loren ipsum?",
    "ai": "<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
  }, {
    "teste": 3,
    "oi": "Outro disclaimer sobre a loren ipsum?",
    "ai": "<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
  }]
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://textangular.com/dist/textAngular.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/0.9.2/trix.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/trix/0.9.2/trix.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="man">
  <div class="container">
    <div class="entry-content">
      <div id="accordion" class="panel-group">
        <div ng-app="module" class="panel panel-default">
          <div ng-controller="controller">
            <div class="row">
              <div class="col-md-6 col-sm-9">
                <h1>Teste <strong>Lorem Ipsum</strong></h1>
              </div>
            </div>
            <div ng-repeat="teste in testes">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" href="#faq{{ teste.teste }}" data-toggle="collapse" data-parent="#accordion"> {{ teste.oi }}</a>
                </h4>
                <p></p>
              </div>
              <div id="faq{{ teste.teste }}" class="panel-collapse collapse">
                <div class="panel-body" ng-bind-html="teste.ai">{{ teste.ai }}</div>
                <trix-editor angular-trix ng-model="foo" class="trix-content" style="background-color:#fff" ng-bind-html="teste.ai">{{ teste.ai }}</trix-editor>
                <p></p>
              </div>
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

The problem using the Angular Trix is that I’m not able to add the teste.ai within the <trix-editor> and I couldn’t implement a button to allow changing only when it was clicked.

Trying to use nicEdit

var app = angular.module('module', ['ngSanitize']);
app.controller('controller', function($scope) {
  $scope.testes = [{
    "teste": 1,
    "oi": "O que \u00e9 a loren ipsum?",
    "ai": "<ul><li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>   <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li><li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li><li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li></ul>"
  }, {
    "teste": 2,
    "oi": "Disclaimer sobre a loren ipsum?",
    "ai": "<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
  }, {
    "teste": 3,
    "oi": "Outro disclaimer sobre a loren ipsum?",
    "ai": "<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
  }]
});

bkLib.onDomLoaded(function() {
  nicEditors.allTextAreas();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://textangular.com/dist/textAngular.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<section class="man">
  <div class="container">
    <div class="entry-content">
      <div id="accordion" class="panel-group">
        <div ng-app="module" class="panel panel-default">
          <div ng-controller="controller">
            <div class="row">
              <div class="col-md-6 col-sm-9">
                <h1>Teste <strong>Lorem Ipsum</strong></h1>
              </div>
            </div>
            <div ng-repeat="teste in testes">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" href="#faq{{ teste.teste }}" data-toggle="collapse" data-parent="#accordion"> {{ teste.oi }}</a>
                </h4>
                <p></p>
              </div>
              <div id="faq{{ teste.teste }}" class="panel-collapse collapse">
                <textarea class="panel-body" ng-bind-html="teste.ai">{{ teste.ai }}</textarea>
                <p></p>
              </div>
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

The problem using nicEdit is that nothing works hauahsuash.

angularjs wysiwyg nicedit

1 answer

4


I managed to solve using nicEdit

var area;

var app = angular.module('module', ['ngSanitize']);
app.controller('controller', function($scope) {
  $scope.editar = function($event) {
    value = $event.currentTarget.getAttribute("value");
    option = $event.currentTarget.getAttribute("option");
    // console.log(option, value);
    if (option == "false") {
      
      area = new nicEditor({fullPanel : true}).panelInstance('instance' + value,{hasPanel : true});
      $event.currentTarget.setAttribute("option", "true");
    } else {
      area.removeInstance('instance' + value);
      area = null;
      $event.currentTarget.setAttribute("option", "false");
    }
  }
  $scope.testes = [{
    "teste": 1,
    "oi": "O que \u00e9 a loren ipsum?",
    "ai": "<ul><li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>   <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li><li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li><li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li></ul>"
  }, {
    "teste": 2,
    "oi": "Disclaimer sobre a loren ipsum?",
    "ai": "<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
  }, {
    "teste": 3,
    "oi": "Outro disclaimer sobre a loren ipsum?",
    "ai": "<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
  }]
});

bkLib.onDomLoaded(function() {
  contador = 1;
  jQuery('button[fazparte]').each(function() {
    if (this.getAttribute("option") == "true") {
      var myNicEditor = new nicEditor();
      myNicEditor.setPanel('panel' + contador);
      myNicEditor.addInstance('instance' + contador);
      contador++;
    }
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://textangular.com/dist/textAngular.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<section class="man">
  <div class="container">
    <div class="entry-content">
      <div id="accordion" class="panel-group">
        <div ng-app="module" class="panel panel-default">
          <div ng-controller="controller">
            <div class="row">
              <div class="col-md-6 col-sm-9">
                <h1>Teste <strong>Lorem Ipsum</strong></h1>
              </div>
            </div>
            <div ng-repeat="teste in testes">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" href="#faq{{ teste.teste }}" data-toggle="collapse" data-parent="#accordion"> {{ teste.oi }}</a>
                </h4>
                <p></p>
              </div>
              <div id="faq{{ teste.teste }}" class="panel-collapse collapse">
                <button ng-click="editar($event)" option="false" value="{{ teste.teste }}" fazparte>Editar</button>
                <div id="panel{{ teste.teste }}" style="width: 350px;"></div>
                <div id="instance{{ teste.teste }}" class="panel-body" ng-bind-html="teste.ai">{{ teste.ai }}</div>
                <p></p>
              </div>
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

There are errors in the code*, but by the proposed question, it already solves :)

*I managed to solve, an example of error: in case there is collision when editing an element, but I find it unnecessary to post the solutions I arrived at.

Browser other questions tagged angularjs wysiwyg nicedit

You are not signed in. Login or sign up in order to post.