Transformando Textarea em um editor de texto com CKEDITOR

CursoCriando uma aplicação com área administrativa utilizando o Laravel

A necessidade de uma ferramenta que nos possibilita fazer diversos tipos de edição de texto vai muito além do Word ou Open Office para computador, esta necessidade alcança as páginas WEB.

Você já ouviu falar em WYSIWYG? Acho que não! Pois bem, ele é um acrônimo para "What You See Is What You Get", traduzindo para o nosso amado português seria algo como, “O que você vê é o que você quer”. Este acrônimo faz referência aos editores de texto, pois conforme você vai formatando o texto, já pode ir conferindo o resultado em tempo real.

A parte teórica nós já sabemos, mas caso queira se aprofundar mais, recomendo que confira os links de referência no final da página.

Atualmente existem vários editores WYSIWYG disponíveis para download, inclusive aqui no SatellaSoft foi disponibilizado um modelo totalmente gratuito, você pode conferir em: http://satellasoft.com/?materia=simples-wysiwyg-editor.

Estes editores trabalham de forma muito semelhante, basicamente eles acessam o Textarea ou algum outro campo especificado e criam vários outros elementos a partir do local especificado, então todo conteúdo manipulado no editor é inserido em HTML dentro do Textarea, que fica oculto, já que ele serve apenas como fonte de dados.

Veja abaixo alguns editores que você pode utilizar em seus projetos.

Bootstrap-WYSIWYG

Site: http://mindmup.github.io/bootstrap-wysiwyg

Redactor

Site: https://imperavi.com/redactor

TinyMCE

Site: https://www.tinymce.com

WYSIWYG5

Site: http://xing.github.io/wysihtml5

Raptor

Site: https://www.raptoreditor.com/demo

Agora que já conhecemos vários editores, entendemos como eles funcionam, podemos implementar o nosso de forma muito simples. Para este artigo, será utilizado o CKEditor, ele é um dos mais populares e não é por que estamos utilizando ele aqui que ele seja melhor que os citados acima.

O CKEditor é um dos editores mais populares e acredito que você em algum momento em sua jornada de navegante pela WEB já deve ter encontrado com ele, seja em um campo de comentário, descrição ou qualquer outro local. O mais interessante é que não precisamos de uma moeda para o barqueiro, ou seja, ele é gratuito!

Várias corporações utilizam ele em suas aplicações, dentre elas: Adobe, IBM, Oracle e é claro, o portal SatellaSoft.

Podemos utilizar três pacotes do CKEditor, logo abaixo você pode conferir o conteúdo de cada um deles.

Basic Package – Pacote Básico

Standard Package – Pacote Padrão

Full Package – Pacote completo

Agora que já conhecemos o CKEditor, vamos colocar a mão na massa, e já adianto que é muito simples instala-lo em seu projeto. Primeiramente faça o Download da versão que você deseja utilizar em seu projeto, aqui será utilizado a básica, pois é apenas para exemplificar. Basta selecionar a versão do pacote e clicar no botão em vermelho com o título “Download CKEditor”.

Download CKEditor: http://ckeditor.com/download

Após fazer o download do arquivo, descompacte a pasta CKEditor para dentro do seu projeto.

O código do nosso projeto está exibido logo abaixo, note que temos um Textarea com o nome txtArtigo, este é o nome correspondente a sua funcionalidade.

Código 01:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>CKEditor</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<div id="dvCentro">
			<textarea id="txtArtigo" name="txtArtigo"></textarea>
		</div>
	</body>
</html>

Para incorporar o CKEditor, basta incluir o arquivo ckeditor.js que está dentro da pasta ckeditor, conforme mostra o código abaixo.

Código 02:

<script src="ckeditor/ckeditor.js"></script>

E por fim, basta chamar a função CKEDITOR.replace() e passar como parâmetro o nome do seu editor, neste caso ele se chama txtArtigo.

Código 03:

<script>
	CKEDITOR.replace( 'txtArtigo' );
</script>

Nosso código completo fica como mostrado abaixo.

Código 04:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>CKEditor</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<div id="dvCentro">
			<textarea id="txtArtigo" name="txtArtigo"></textarea>
		</div>
		<script src="ckeditor/ckeditor.js"></script>
		<script>
                CKEDITOR.replace( 'txtArtigo' );
        </script>
	</body>
</html>

Se tudo ocorreu bem, o editor já estará funcionando conforme a imagem do pacote básico. Se você inspecionar o elemento Textarea, poderá ver todas as tags HTML criado pelo editor.

Caso necessite de algum recurso no CKEditor, como por exemplo, incorporar vídeos do Youtube, pode procurar pelos Plugin, existem vários disponíveis para download totalmente gratuito.

Vamos baixar e configurar o plugin do Youtube, para isso acesse o endereço http://ckeditor.com/addon/youtube e clique no botão Download.

Descompacte o arquivo baixado e copie a pasta youtube para dentro da pasta ckeditor/plugin.

Agora dentro da pasta ckeditor, abra em um editor de códigos o arquivo config.js. Insira o código abaixo dentro da função CKEDITOR.editorConfig.

Código 05:

config.extraPlugins = 'youtube';

Após ter inserido a pasta youtube dentro da pasta de plugin e inserido o código no arquivo de configurações, abra seu editor e note que o ícone do Youtube já está visível. Inserindo uma URL, o editor já mostra o campo do vídeo, porém não pode reproduzi-lo, mas mesmo assim está correto e não é um erro ou falha. Se você estiver rodando script dentro do apache ou ISS poderá ver o vídeo.

Bem, agora o CKEditor já está instalado, configurado e você ainda aprendeu a instalar plug-ins. Acredito que ninguém vá utilizar o editor apenas de enfeite e sim gravar o seu conteúdo em alguma base de dados ou processar de alguma forma o conteúdo gerado. Vamos ver como obter os valores utilizando o PHP e o ASP.NET.

Implementação com PHP

Código 06:

<?php
	$conteudo = "";
	
	if(filter_input(INPUT_POST, "btnSubmit")){
		$conteudo = filter_input(INPUT_POST, "txtArtigo");
		//Armazenamos os dados gerado pelo editor na variável $conteudo.
	}
?>
<!doctype html>
<html lang="pt-br">
	<head>
		<title>CKEditor</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<div id="dvCentro">
			<form method="post" name="frmArtigo">
				<textarea id="txtArtigo" name="txtArtigo"><?=$conteudo;?></textarea>
				<input type="submit" value="Cadastrar" name="btnSubmit" />
			</form>	
		</div>
		<script src="ckeditor/ckeditor.js"></script>
		<script>
                CKEDITOR.replace( 'txtArtigo' );
        </script>
		<br />
		<div id="dvConteudo">
			<?php
				echo $conteudo;
			?>
		</div>
	</body>
</html>

Implementação com ASP.NET

Para implementar o CKEditor no ASP.NET, não é tão simples como o do PHP, mas também não é nenhum pouco complicado, só existe alguns passos a mais. No código 07 temos o HTML, note que nele o Textarea pode ser acessado pelo servidor. No código 08 obtemos o valor do Textarea e inserimos no elemento div. Quando submetemos um valor com códigos para o formulário, ele nos retorna um erro de violação, então devemos adicionar as duas linhas indicadas no código 09 no Web.config.

Código 07:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CKEditor_teste.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CKEditor ASP.NET</title>
    <script src="ckeditor/ckeditor.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            CKEDITOR.replace('txtArtigo');
        }, false);
    </script>
</head>
<body>
    <form id="frm" runat="server">

        <textarea id="txtArtigo" runat="server"></textarea>
        <asp:Button ID="btnCadastrar" runat="server" Text="Cadastrar" OnClick="btnCadastrar_Click" />
        <br />
        <div id="dvResultado" runat="server"></div>
    </form>
</body>
</html>

Código 08:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CKEditor_teste
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        
        protected void btnCadastrar_Click(object sender, EventArgs e)
        {
            dvResultado.InnerHtml = txtArtigo.Value;
        }
    }
}

Código 09:

<?xml version="1.0"?>

<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <!--Adicione as duas linhas abaixo, para permitir o conteúdo bloqueado-->
    <httpRuntime requestValidationMode="2.0" />
    <pages validateRequest="false" />
    <!--Fim das linhas-->
  </system.web>

</configuration>

Finalmente acabamos, caso você vá testar no Chrome o plugin do Youtube, o browser ira bloquear. No exemplo com PHP e ASP.NET não utilize o Chrome para teste local, você pode utilizar o Mozilla. Fique tranquilo pois quanto a sua aplicação estiver em um servidor WEB irá funcionar corretamente no Chrome.

Caso queria obter o valor do editor via Javascript, utilize o código abaixo.

Código 10:

var value = CKEDITOR.instances['editor1'].getData();
console.log(value);

Espero que tenham gostado, pois este post tentei resumir o máximo para não ficar algo muito grande, então vale lembrar de ler as referências logo abaixo para aprimorar ainda mais os seus conhecimentos.

Até a próxima! :D