Why is the Codeview plugin not highlighting colors?

Asked

Viewed 80 times

5

I’m using the plugin Froala in a textarea, in this way:

<textarea name="fDescription" class="form-control" rows="4"></textarea>

And 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 as I want, entertained when I click the button Code View, even the text in code format is shown, but it is not highlighting the elements with the color, as shown in official website (click on the button Code View to see).

Could you help me fix this so it’s enhanced with colors by clicking 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>

You can help me?

javascript html wysiwyg froala-editor

1 answer

0

Missed you enter the references of Code Mirror 

<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>

To enable the Code View with the option toolbarButtons: [ 'html' ] follows a note from documentation.

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

  • html button requires plugin codeView;

Follow an example on jsfiddle.

Browser other questions tagged javascript html wysiwyg froala-editor

You are not signed in. Login or sign up in order to post.