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.