Using WYSIWYG editor with angle

Question

Using WYSIWYG editor with angle

Navigation

#1 by (4 votes)

4

I'm starting my studies now 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 I'm not getting the desired result.

There is this in the OS where they list a considerable amount of WYSIWYG modules that can be used in the project, which I (except for the layout and the lack of some functionality) and I found it easy to implement was Angular Trix .

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

Using the Angular Trix

In this example I used Trix, I'll add an example trying to implement 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><scriptsrc="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><scriptsrc="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 with Angular Trix is that I am not able to add teste.ai to <trix-editor> and I was unable to implement a button to allow change only when 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><scriptsrc="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><scriptsrc="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 with nicEdit is that nothing works hauahsuash.

angularjs wysiwyg nicedit

asked by anonymous 05.02.2017 / 17:39

1 answer

bring menus and active submenus C # Which method to get the full volume of media on Android?

score 4 · Accepted Answer

I was able to resolve 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><scriptsrc="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><scriptsrc="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 for the proposed question, this already solves:)

* I have managed to solve an error example: if there is a collision when editing an element, but I find it unnecessary to post the solutions I've come up with.