5

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?

1

1 Resposta 1

0

Faltou você inserir as referências do 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>

Para habilitar o Code View com a opção toolbarButtons: [ 'html' ] segue uma nota da documentação.

Alguns dos botões acima exigem um plugin específico. Aqui está a lista completa de plugins e os arquivos necessários para cada um deles.

  • botão html requer o plugin codeView;

Segue um exemplo no jsfiddle.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .