To meio que iniciando agora meus estudos com angularJS.
Bom, estou tentando adicionar um editor WYSIWYG ("What You See Is What You Get"). ao meu script usando angular 1.6.1 mas não estou obtendo o resultado desejado.
Existe essa pergunta no SO onde listaram uma quantidade considerável de módulos WYSIWYG que podem ser usados no projeto, o que eu mais gostei (com exceção do layout e a falta de algumas funcionalidades) e achei fácil de implementar foi o Angular Trix.
Eu queria obter um resultado similar ao do nicEdit customizando como no demo-3(para adicionar as opções de edição para somente quando fosse clicado em editar) e no demo-5(para alterar o layout da área onde fica o texto).
Usando o Angular Trix
Nesse exemplo abaixo eu usei o Trix, vou adicionar um exemplo tentando implementar o 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>
O problema usando o Angular Trix é que eu não estou conseguindo adicionar o teste.ai
dentro do <trix-editor>
e não consegui implementar um botão para permitir alterar somente quando fosse clicado.
Tentando usar o 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>
O problema usando o nicEdit é que nada funciona hauahsuash.