Editor de texto CkEditor

Carregando a lib js no seu projeto

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.19.1/standard-all/ckeditor.js"></script>

A função a baixo faz uma busca pelas classes .text assim que ele encontra o elemento

function ckeditor(){
    CKEDITOR.remove
    $("textarea.text").each(function(){
        var txt = $( this ).attr('id');
        CKEDITOR.remove
        CKEDITOR.replace( txt , {
            baseFloatZIndex : 2000000,
            toolbar: [
                { name: 'styles', items: [ 'Styles', 'Format', 'FontSize' ] },
                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
                { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote',         'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
                { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
                
            ]
        });
    });
}
ckeditor();

Carregando

<textarea class="form-control text" name="description" id="description" cols="30" rows="10"></textarea>

Pronto pequeno Padawan! Agora você tem um editor de texto basico em seu formulário.

Plugin

Was this article helpful?

Related Articles

Leave A Comment?