Why is not the CodeView plugin enhancing colors?

5

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?

    
asked by anonymous 22.11.2017 / 14:53

1 answer

0

You have been missing the Code Mirror references

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css" rel="stylesheet" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>

ToenableCodeViewwiththetoolbarButtons:['html']optionfollowsanotefrom documentation .

  

Some of the above buttons require a specific plugin. Here is the list    complete plugins and the necessary files for each of them.

     
  • html button requires plugin codeView ;
  •   

Follow the example in jsfiddle .

    
14.08.2018 / 22:10