Editor Wysiwyg com Upload de Fotos - #1 Instalação
04/10/2018Neste vídeo-tutorial vamos aprender como desenvolver um editor completo com upload de fotos, toolbar e otimizações, além da inserção dos dados no banco.
Editor de textos com upload de fotos em PHP
O primeiro passo para realizarmos a construção do editor e instalar as duas bibliotecas necessárias:
CKEditor
CKFinder
Posteriormente extrairemos esses arquivos dentro de uma pasta "js" criada na raíz do nosso projeto.
Vamos criar agora nosso index.php com o html:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Editor com Upload de Fotos</title>
</head>
<body>
<textarea name="texto" id="texto"></textarea>
<script src="js/ckeditor/ckeditor.js"></script>
<script src="js/ckfinder/ckfinder.js"></script>
<script src="js/javascript.js"></script>
</body>
</html>Repare que no código acima fizemos as instalações das bibliotecas ao fim do corpo do site. O editor será instalado na textarea de id texto.
Vamos criar agora nosso arquivo javascript.js que transformará o textarea num editor:
CKEDITOR.replace( 'texto' );Para personalizar a barra do editor, basta alterar o arquivo config.js dentro da pasta ckeditor:
config.toolbar = 'Full';
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];Na próxima aula continuamos com o upload de fotos!
Sucesso nos códigos e na vida!
Posts Relacionados
