I'm using the plugin Froala in a textarea
, like this:
<textarea name="fDescription" class="form-control" rows="4"></textarea>
Then activating the plugin with 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,
});
});
Almost everything works the way I want it to, but when I click the Code View button, text is shown in code format, but it is not highlighting the elements with color, as shown in official site (click the Code View button to see).
Could you help me fix this so that it is highlighted with color when I click the button?
This is my CSS import order:
<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">
and the JavaScript files:
<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>
Can you help me?