Estou utilizando o plugin Froala em um textarea
, desta forma:
<textarea name="fDescription" class="form-control" rows="4"></textarea>
E então ativando o plugin com jQuery:
$(document).ready(function () {
$('textarea').froalaEditor({
placeholderText: 'Digite os detalhes…',
language: 'pt_br',
pluginsEnabled: ['align', 'charCounter', 'codeBeautifier', 'codeView', 'colors', 'entities', 'fontFamily', 'fontSize', 'inlineStyle', 'lineBreaker', 'link', 'lists', 'paragraphFormat', 'paragraphStyle', 'fullscreen', 'image','quote', 'table', 'url', 'video'],
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', 'color', 'undo', 'redo', 'clearFormatting', '|', 'paragraphFormat', 'quote', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'subscript', 'superscript', '|', 'insertLink', 'insertTable', 'fullscreen', 'html'],
charCounterMax: -1,
});
});
Quase tudo funciona como eu quero, entretano quando eu clico no botão Code View, até é mostrado o texto em formato de código, mas não está realçando os elementos com a cor, como é mostrado no site oficial (cliquem no botão Code View para ver).
Poderiam me ajudar a corrigir isso para que seja realçado com cores ao clicar no botão?
Essa é a minha ordem de importação de CSS:
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/froala_style.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/froala_editor.min.css" rel="stylesheet" type="text/css">
e dos arquivos JavaScript:
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/froala_editor.min.js"></script>
<script src="assets/js/froala_editor.pkgd.min.js"></script>
<script src="assets/js/froala_lang.min.js"></script>
Vocês podem me ajudar?