Top

Manual de Implementação Frontend para Sistemas
IPASGO SAÚDE



Acessar Implementação Exemplo

Editores de Texto


<div class="ace-editor" id="editor">
/* Sample JavaScript edit source */
// Define a module
var app = angular.module('app', ['ui.bootstrap']);
// Define a conroller.
app.controller('GrokController', ['$scope', '$filter',
function($scope, $filter) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.isOpened = false;
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.isOpened = true;
};
}]);
/* End of sample edit source */
</div>
Para usar o código ace você precisa adicionar os seguintes arquivos de script
<!-- ace code editor js -->
<script src="arquivos/assets/js/editor/ace-editor/ace.js"></script>
<script src="arquivos/assets/js/editor/ace-editor/ace-custom.js"></script>
<script src="arquivos/assets/js/editor/ace-editor/mode-css.js"></script>
<script src="arquivos/assets/js/editor/ace-editor/mode-html.js"></script>
<script src="arquivos/assets/js/editor/ace-editor/mode-javascript.js"></script>
<script src="arquivos/assets/js/editor/ace-editor/mode-php.js"></script>
<script src="arquivos/assets/js/editor/ace-editor/theme-monokai.js"></script>
<script src="arquivos/assets/js/editor/ace-editor/worker-css.js"></script>
<script src="arquivos/assets/js/editor/ace-editor/worker-html.js"></script>
<script src="arquivos/assets/js/editor/ace-editor/worker-javascript.js"></script>
<script src="arquivos/assets/js/editor/ace-editor/worker-php.js"></script>
<div class="toolbar-box">
<div id="toolbar7"><span class="ql-formats">
<select class="ql-size">
<option value="small">Small</option>
<option selected="">Normal</option>
<option value="large">Large</option>
<option value="huge">Huge</option>
</select></span><span class="ql-formats">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
<button class="ql-underline">Underline</button>
<button class="ql-strike">Strike</button>
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button></span><span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button></span><span class="ql-formats">
<button class="ql-list" value="ordered">List</button>
<button class="ql-list" value="bullet">Bullet</button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button></span><span class="ql-formats">
<button class="ql-link">Link</button>
<button class="ql-image">Image</button>
<button class="ql-video">Video</button>
<select class="ql-color"></select>
<select class="ql-background"></select></span>
<!-- Add more options here--><span class="ql-formats">
<button class="ql-blockquote">Blockquote</button>
<button class="ql-code-block"></button></span><span class="ql-formats">
<button class="ql-align" value=""></button>
<button class="ql-align" value="center"></button>
<button class="ql-align" value="right"></button>
<button class="ql-align" value="justify"></button></span><span class="ql-formats">
<button class="ql-clean"></button></span>
</div>
<div class="quill-paragraph" id="editor7">
<p>There was a road along with that open place. When the tiger saw any man passing by he said to him, “Brother, here is a good bangle. I wish to give it to you. Don’t fear. lam old and infirm now. I now pray to God five times a day and doing it will be useful to you. Don’t fear, come to me and take other religious acts. This bangle is useless to me. It will be useful to you. Don’t fear, come to me and take this.”</p>
</div>
</div>
                
Para usar o código ace você precisa adicionar os seguintes arquivos de script
<!-- quill js -->
<script src="arquivos/assets/js/custom-quill.js"></script>
<script src="arquivos/assets/js/vendors/quill/dist/quill.min.js"></script>
<script src="arquivos/assets/js/vendors/quill/dist/quill.js"></script>
Para usar o mde simples você tem que adicionar os seguintes arquivos de estilo
<!-- quill-css -->
<link rel="stylesheet prefetch" href="arquivos/assets/css/vendors/quill/dist/quill.snow.css">
<link rel="stylesheet prefetch" href="arquivos/assets/css/vendors/quill/dist/quill.bubble.css">