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.