Baixando e instalando o CKEditor

Gunnar CorreaGunnar Correa20/11/2020 às 20:21:58 - 84 acessos

Baixando e instalando o CKEditor

Esse é um dos principais e mais consagrados editores de texto Open Source.


CKEditor é um editor de texto online de código aberto, utilizado por muitas empresas ao redor do mundo, como o próprio SatellaSoft, Amazon, Volvo, Microsoft, IBM, entre milhares de outras.

O Editor é simplesmente incrível, pois além de seus plugins nativos, existem muitos outros criados pela comunidades, inclusive, você mesmo pode criar os seus próprios.

CKEditor faz parte dos editores WYSIWYG (What You See Is What You Get - O que você vê é o que você obtém), pois além dele, muitos outros existem no mercado, mas aqui, vamos falar apenas desse editor em especifico.

O download pode ser feito em https://ckeditor.com/ckeditor-5.

Assista a nossa videoaula e veja como é fácil baixar, instalar e de bónus, você aprende a como receber o conteúdo com o PHP.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CKEditor</title>

    <style>
        .ck-editor__editable_inline {
            min-height: 400px;
        }
    </style>

</head>

<body>

    <form action="ler.php" method="post">
        <textarea name="txtConteudo" id="txtConteudo"></textarea>
        <button type="submit">Cadastrar</button>
    </form>

    <script src="vendor/ckeditor/build/ckeditor.js"></script>
    <script>ClassicEditor
            .create(document.querySelector('#txtConteudo'), {

                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'undo',
                        'redo',
                        '|',
                        'bold',
                        'italic',
                        'fontSize',
                        'fontColor',
                        'fontBackgroundColor',
                        'fontFamily',
                        '|',
                        'link',
                        '|',
                        'bulletedList',
                        'numberedList',
                        'indent',
                        'outdent',
                        '|',
                        'imageUpload',
                        'blockQuote',
                        'insertTable',
                        'mediaEmbed',
                        '|',
                        'exportPdf',
                        'exportWord'
                    ]
                },
                language: 'pt-br',
                image: {
                    toolbar: [
                        'imageTextAlternative',
                        'imageStyle:full',
                        'imageStyle:side'
                    ]
                },
                table: {
                    contentToolbar: [
                        'tableColumn',
                        'tableRow',
                        'mergeTableCells'
                    ]
                },
                licenseKey: '',

            })
            .then(editor => {
                window.editor = editor;








            })
            .catch(error => {
                console.error('Oops, something went wrong!');
                console.error('Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:');
                console.warn('Build id: 9vyad6gsfs8k-2evma7h1quav');
                console.error(error);
            });
    </script>

</body>

</html>


ler.php

<?php

$conteudo = filter_input(INPUT_POST, 'txtConteudo', FILTER_SANITIZE_SPECIAL_CHARS);

echo html_entity_decode($conteudo);

Até a próxima.


download ckeditor baixar ckeditor instalar ckeditor instação ckeditor 5 ckeditor 5 html ckeditor

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.