Muab TEXTAREA editor (WYSIWYG | Ckeditor)

Ntawm no yog pab ceev kom koj mus integrate CKEditor uas koj tau ntawv nyob rau hauv peb cia li ruam.

Kev nthuav qhia

Transformar suas tags TEXTAREA em um editor Web já não é uma tarefa complicada. Dentre os vários editores que você pode encontrar na Internet, vamos ver o uso do CKEditor. Veja o editor em ação neste DEMO.

Plahaum

Baixe o CKEditor em http://ckeditor.com/download. A versão utilizada neste Post foi 3.6.4, ntawm 17 Jul 2012. Extraia o arquivo ckeditor_3.6.4.zip junto a sua aplicação. Uma pasta ckeditor será criada. Npaj txhij, agora basta fazer a chamada dentro do seu código-fonte!

Integração

O CKEditor é uma aplicação JavaScript. Para lê-lo, basta fazer uma simples chamada para ele dentro das tags HEAD do seu código-fonte. Ua li no, a API Javascript do CKEditor já estará pronta para ser utilizada. Lembre-se de ajustar o caminho do arquivo ckeditor.js para o diretório em que foi descompactado.

Kauj ruam 1Faça a chamada ao CKEditor
1
2
3
  <lub taub hau>
    <tsab ntawv hom="text/javascript" src="ckeditor/ckeditor.js"></tsab ntawv>
  </lub taub hau>
Kauj ruam 2Crie um campo TEXTAREA
1
2
3
  <lub cev>
    <textarea id="editor1" lub npe="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
  </lub cev>
Kauj ruam 3Diga qual TEXTAREA (ID) será substituído pelo CKEditor
1
2
3
4
5
6
7
  <lub taub hau>
    <tsab ntawv hom="text/javascript">
      qhov rai.onload = muaj nuj nqi()  {
        CKEDITOR.replace( 'editor1' );
      };
    </tsab ntawv>    
  </lub taub hau>

Npaj txhij, já funciona! Não acredita? Salve, dê lá oF5no navegador e veja você mesmoo código completo fica assim:

Teb chaws

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
  <lub taub hau>
    <npe>Ckeditor</npe>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></tsab ntawv>
    <tsab ntawv hom="text/javascript">
      qhov rai.onload = muaj nuj nqi()  {
        CKEDITOR.replace( 'editor1' );
     };
    </tsab ntawv>
  </lub taub hau>
  <lub cev>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
      <input type="submit" value="Submit" />
    </daim ntawv>  
  </lub cev>
</HTML>

tau mas, agora você precisa fazer os ajustes conforme sua aplicação, a começar definindo o nkaus do seu FORM, indicando a página que irá recuperar e tratar os dados submetidos via POST.

O Artigo termina aqui, mas vou deixar mais algumas pérolas para os curiosos:

Lub tswv yim

(1) Sem evento onload, com class=ckeditor

Se você atribuir a classeckeditorpara seu TEXTAREA, automaticamente ele já será convertido em um CKEditor, sem que seja preciso utilizar o script chamado pelo eventoonload”, bem simples assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
<HTML>
  <lub taub hau>
    <npe>Ckeditor</npe>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <tsab ntawv hom="text/javascript" src="ckeditor/ckeditor.js"></tsab ntawv>
  </lub taub hau>
  <lub cev>
    <daim ntawv txiav txim="request.php" txujci="post">
      <textarea class="ckeditor" ID="editor1" lub npe="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
      <hom input="submit" tus nqi="Submit" />
    </daim ntawv>  
  </lub cev>
</HTML>

(2) Trocar quebra de linha <p> por <br />

Notei duas maneiras de trocar P por BR quando teclamos ENTER. A primeira, é setar o parâmetro enterMode com valor 2, já que 1 = P, 2 = BR e 3 = DIV.

1
2
3
4
5
6
7
  <lub taub hau>  
    <tsab ntawv hom="text/javascript">
      qhov rai.onload = muaj nuj nqi() {
        CKEDITOR.replace( 'editor1', {enterMode: Number(2)} );
      };
    </tsab ntawv>
  </lub taub hau>

Ou então, abra o arquivo config.js e defina algo como:

1
2
3
CKEDITOR.editorConfig = muaj nuj nqi( config ) {
  config.enterMode = CKEDITOR.ENTER_BR;
};

Qhov no, ao digitar ENTER, temos as opções:
CKEDITOR.ENTER_P – novo parágrafo P é criado;
CKEDITOR.ENTER_BR – quebra de linha com BR;
CKEDITOR.ENTER_DIV – novo bloco com DIV é criado.

Recomendo fechar e abrir o navegador para ver o resultado

desta mudança, pois a coisa pode ficar em cache! Caso ainda assim não funcione, limpe o cache do navegador.

(3) Alterar a cor de fundo da barra de ferramentas do CKEditor

Como você percebeu, podemos fazer modificações em nosso CKEditor atribuindo parâmetros diretamente ao objeto CKEDITOR ou via arquivo config.js. Li ntawd, vou demonstrar apenas de uma das formas:

1
2
3
4
5
6
7
  <lub taub hau>  
    <tsab ntawv hom="text/javascript">
      qhov rai.onload = muaj nuj nqi() {
        CKEDITOR.replace( 'editor1', {uiColor: '#ff0000'} );
      };
    </tsab ntawv>
  </lub taub hau>

(4) Combinando parâmetros de configuração do CKEditor

Os parâmetros de configuração do CKEditor podem ser combinados. Para conhecer as possibilidades, dê uma olhada na API Config. Piv txwv:

1
2
3
4
5
6
7
8
9
10
11
12
  <lub taub hau>  
    <tsab ntawv hom="text/javascript">
      qhov rai.onload = muaj nuj nqi() {
        CKEDITOR.replace( 'editor1', {  uiColor: '#ccc',
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : 'ckeditor/outroConfig.js',
                                        language: 'pt-br'        
                                      } 
                        );
      };
    </tsab ntawv>
  </lub taub hau>

(5) Linguagens suportadas pelo CKEditor

O CKEditor suporta 58 idiomas, inclusive opt-br”. Veja mais em User Interface Languages. O exemplo acima demonstra seu uso.

(6) Personalizando a barra de ferramentas

Básico

Pode ser que você não queira disponibilizar todos os recursos do CKEditor. Li ntawd, por que não otimizar a barra de ferramentas conforme sua necessidade? Segue um exemplo deixando o editor bem BÁSICO.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <lub taub hau>  
    <tsab ntawv hom="text/javascript">
      qhov rai.onload = muaj nuj nqi() {
        CKEDITOR.replace( 'editor1', {
                           toolbar:
                           [
                             { lub npe: 'basicstyles', items : [ 'Bold','Italic' ] },
                             { lub npe: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
                             { lub npe: 'tools', items : [ 'Maximize','-','About' ] }
                           ]}         
                         );
      };
    </tsab ntawv>
  </lub taub hau>

Completo

Segue abaixo um exemplo mais COMPLETO. Retire os botões que não desejar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <lub taub hau>  
    <tsab ntawv hom="text/javascript">
      qhov rai.onload = muaj nuj nqi() {
        CKEDITOR.replace( 'editor1', {
                           toolbar: [
                             { lub npe: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
                             { lub npe: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
                             { lub npe: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
                             { lub npe: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
                             '/',
                             { lub npe: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
                             { lub npe: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                             { lub npe: 'links', items : [ 'Link','Unlink','Anchor' ] },
                             { lub npe: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
                             '/',
                             { lub npe: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
                             { lub npe: 'colors', items : [ 'TextColor','BGColor' ] },
                             { lub npe: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }                            
                           ]}         
                         );
      }; 
    </tsab ntawv>
  </lub taub hau>

Moderado

Este é um exemplo mais MODERADO, com uma barra de ferramenta apenas, mas com os principais recursos. Nco ntsoov tias, inclusive, é possível combinar e determinar a altura e largura do Editor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<lub taub hau>  
  <tsab ntawv hom="text/javascript">
    qhov rai.onload = muaj nuj nqi() {       
        CKEDITOR.replace( 'editor1', {
                           toolbar:
                           [
                             { lub npe: 'basicstyles', items : [ 'Bold','Italic','Underline' ] },
                             { lub npe: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
                             { lub npe: 'paragraph', items : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { lub npe: 'styles', items : [ 'Font','FontSize' ] },
                             { lub npe: 'colors', items : [ 'TextColor','BGColor' ] },
                             { lub npe: 'clipboard', items : [ 'Cut','Copy','Paste','PasteFromWord','-','Undo','Redo' ] },                             
                             { lub npe: 'tools', items : [ 'Maximize','-','About' ] }
                           ],
                           dav: "740px",
                           height: "200px"}
                         );
    };
  </tsab ntawv>
</lub taub hau>

(7) Textarea (Ckeditor) vazio ao submeter o formulário

Caso seu Textarea/CKeditor apareça em branco (vazio) ao submeter o formulário, você pode usar esseartifícioque criei abaixo, que na verdade serve para pegar o conteúdo do CKEditor e jogar no Textarea correspondente. Isto é feito chamando a função setCKEditorToTextarea() no momento de clicar no botão para enviar (submit ou button), normalmente no evento onclick() do botão.

1
2
3
4
5
6
<tsab ntawv hom="text/javascript">
      muaj nuj nqi setCKEditorToTextarea() {
        yog(Var instanceName in CKEDITOR.instances)
          CKEDITOR.instances[instanceName].updateElement();            
      }
</tsab ntawv>

Palavras do desenvolvedor

CKEditor é um editor de texto para ser usado dentro de páginas da web. É um editor WYSIWYG, o que significa que o texto que está sendo editado pelo usuário será o mais parecido possível com o publicado. Ele traz para a web recursos de edição comuns, encontrados em aplicações desktop de edição, como o Microsoft Word e OpenOffice. Uma vez que o CKEditor está licenciado sob licençasOpen Sourcee comercial, você está apto a usá-lo dentro de qualquer tipo de aplicação. Este é o editor ideal para desenvolvedores, criado para fornecer soluções fáceis e poderosas para os seus utilizadores.

Outros editores

Fonts

Pra começar é isso! Consulte o site do desenvolvedor para maiores detalhes.

Tag nrho hits: 58755

27 lus rau “Muab TEXTAREA editor (WYSIWYG | Ckeditor)

  1. Muito legal o post, a parte ao qual desejo ultilizar é referente ao topico 6, tendo em vista que o CKEditor salva em html o seu conteudo descrito dentro do textarea preciso submeter o texto via e-mail com formato html porem preciso salver no BD em formato txt mesmo. Tem alguma sugestão que eu possa ultilizar? :)

  2. Ronaldo Txawm hais tias:

    Txiv leej tub, estou desenvolvendo um projeto e num form tem dois campos textarea.
    Estou usando o CKEditor em ambas.

    ExpedienteEsquerda

    CKEDITOR.replace( ‘expedienteEsq’ );
    CKEDITOR.add

    ExpedienteDireita

    CKEDITOR.replace( ‘expedienteDir’ );
    CKEDITOR.add

    O editor é aplicado corretamente. Mas quando processo o form num arquivo php ele só recebe dados do primeiro campo e o segundo vai vazio.

    É algum problema com o CKEditor? porque se não usá-lo recebo dados dos dois campos normalmente
    .
    Usei a estrutura sugerida pelo próprio site do CKeditor.

    • Olá Ronaldo, fiz um teste aqui e não houve problema. Faça o seguinte, pegue o código abaixo, coloque em um arquivoteste.phpdentro do seu servidor, mas isolado da sua aplicação que está dando problema. Note que ao submeter o formulário com dois textarea (Ckeditor), os dados serão enviados normalmente.

      Arquivo teste.php (DOIS TEXTAREAS SIMULTÂNEOS)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <HTML>
        <lub taub hau>
          <npe>Ckeditor</npe>
          <meta content="text/html; charset=utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></tsab ntawv>
          <script type="text/javascript">
            window.onload = function()  {
              CKEDITOR.replace( 'editor1' );
              CKEDITOR.replace( 'editor2' );
           };
          </tsab ntawv>
        </lub taub hau>
        <lub cev>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Valor inicial 1</textarea>
            <textarea id="editor2" name="editor2">Valor inicial 2</textarea>
            <input type="submit" value="Submit" />
          </daim ntawv>  
        </lub cev>
      </HTML>
      <?PHP ncha 'Editor 1 ---> '.@$_REQUEST['editor1'].'<br />'; ?>
      <?PHP ncha 'Editor 2 ---> '.@$_REQUEST['editor2'].'<br />'; ?>
  3. Ronaldo Txawm hais tias:

    Tentei passar o código mas acho que não foi publicado. Mas você entendeu qual o problema né? Se usar CKEditor só uma das textarea envia dados a outra fica vazia.

    • ua li, creio que entendi. Conforme demonstrado acima, não tive o mesmo problema. Li ntawd, reanalise seu código, veja se não tem mais de um campo (input) com o mesmo nome (lub npe). Hugs!

      • Ronaldo Txawm hais tias:

        Resolvi com sua própria dica…. (6) Textarea (Ckeditor) vazio ao submeter o formulário

        Bastou colocar a função lá e ok :) Essa forma q vc passou é usando php né? Mesmo as páginas sendo em php implantei o editor usando javascript.
        Valeu pelas dicas

        aproveitando mesmo sabendo q não é o tema do post, eu programo a muito tempo com java e .net e em php a menos tempo e tô apanhando com conversão de data em string. Não tem uma função direta, como de string para data (strtotime) ? Acho q vc sabe php bem mais q eu. Se souber essa parada manda pro meu email ronaldodantas2@gmai.com

        Não precisa publicar esse comentário. Valeu pelas dicas.

  4. Ola Taylor muito bom seu post.

    Ja instalei e estou usando funciona bem. Tenho uma duvida, por exemplo no seu blog você inseriu as caixas em amarelos com scripts. Como voce fez isto? E um recurso do ckeditor?

    ua tsaug

  5. Fernando Txawm hais tias:

    Como faço para habilitar o caractere especial de º(PRIMEIRO 1.º) e ª(SEGUNDA 2.ª) SEM QUE EU CLIQUE NA FERRAMENTA INSERIR CARACTERE ESPECIAL? GOSTARIA DE FAZER ISSO AO DIGITAR NO PRÓPRIO TECLADO SEM ABRIR NENHUMA JANELA.

    • Txiv leej tub, testei aqui e é só fazer da forma convencional que funciona, IE, segure a tecla ALT e digite a sequência de números correspondente ao símbolo desejado. Piv txwv: ALT+166 = ª e ALT+167 = º. Txawm hais tias!

  6. James Txawm hais tias:

    nyob zoo sawv ntxov, cara muito bom seu post, estou começando a trabalhar com javascript agora, e to precisando criar um editor de texto, pensei em usar o ckeditor, porém to com dificuldade para conseguir manipular ele, tipo só queria que tivesse , salvar, novo, desfazer, refazer, colar, copiar, e uma caixa de escolha de linguagem, só que ao invés de ser a forma de escrita, seria linguagens de programação, e depois teria que manipular os dados recebidos, tipo como um editor de código fonte normal, só que online, se puder me ajudar.

  7. Amigão, eu instalei de boa, mas um probleminha que eu to enfrentando é que ele transforma os caracteres especiais em codigos html tipo o ê â Â Á e eu queria que eles fossem assim mesmo para meu banco de dados, tem como?

    • Oops, isso aí pode ser algo com o editor que você está usando para escrever o código. Tente usar um bloco de notas comum e insira o código HTML completo do exemplo, e veja se o problema permanece.

      Tente também definir diretivas que dizem a sua página qual conjunto charset usar (ISO-8859-1 ou UTF-8).

      1
      2
      3
      4
      5
      
      <lub cev>
        <lub taub hau>
            <meta charset="UTF-8">
        </lub taub hau> 
      ...

      Se está usando PHP, defina o charset no início do código, antes de qualquer coisa:

      1
      
        <?PHP header("Content-Type: text/html;  charset=ISO-8859-1",tseeb) ?>

      Ou ainda, tente tratar o conteúdo das requisições usando o charset correto:

      1
      
        htmlentities( utf8_decode($_____ NCEJ['variable']) );

      O fato é que o problema que você citou não parece ser do CKEditor, até por que eu uso ele em várias aplicações e não tenho problema algum com caracter especial. Testei também o DEMO no Site do desenvolvedor, e não vi problema. Veja aí: http://ckeditor.com/demo

  8. Marcio Txawm hais tias:

    Boa tarde estou tentado pegar o texto escrito no textArea via javascript para enviar para o banco de dados mas não estou conseguindo, tem algum método para pegar o texto?
    ua tsaug

  9. Boa tarde.
    Estou pensando em usar este dispositivo para receituário médicoalgo muuuito simples mesmo.
    Queria saber como configurar para a barra superior (onde fica as funcionalidades) se ocultar (tipo um botãozinho que faça ela desaparecer após editar o texto)
    Também como faço para sumir com a barra inferior (onde aparece “lub cev” e outros tags) ?
    Como eu torno a caixa de texto com umheightautomático: tipo, se eu prescrever 10 medicações a caixa vai encompridando enquanto eu for digitandoSe eu digitar apenas 1 medicação a caixa fica na altura do que eu digitar

    • Nyob zoo, desculpe, havia alguns cortes (falhas) no seu código, por isso acabei removendo-o.

      Com relação a isso que você precisa, é perfeitamente possível, mas sugiro procurar algum profissional que entenda de JavaScript para ajudá-lo.

      Vou apenas dizer o caminho das pedras:

      Ocultar barra de ferramenta (toolbar):

      1
      2
      3
      
      Var editor = CKEDITOR.inline( 'editor1', {
          removePlugins: 'toolbar'
      } );

      Ocultar rodapé (elementspath):
      http://ckeditor.com/forums/CKEditor-3.x/Disabling-Elements-Path-Display

      Aumentar altura automaticamente (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (demonstração)

      Piv txwv:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      
      <HTML>
        <lub taub hau>
          <npe>Ckeditor</npe>
          <meta content="text/html; charset=utf-8" http-equiv="content-type" />
          <script src="http:////cdn.ckeditor.com/4.5.3/basic/ckeditor.js"></tsab ntawv>
          <script src="plugin.js"></tsab ntawv>  <!-- obter plugin.js em http://ckeditor.com/addon/autogrow -->  
          <tsab ntawv hom="text/javascript">
           qhov rai.onload = muaj nuj nqi()  {
              CKEDITOR.replace( 'editor1', {             
                  removePlugins: 'elementspath', 
                  removePlugins: 'toolbar',
                  extraPlugins: 'autogrow',
                  autoGrow_minHeight: 70,
                  height: '70px'
              });
           };
          </tsab ntawv>
        </lub taub hau>
        <lub cev>
          <daim ntawv txiav txim="request.php" txujci="post">
            <textarea id="editor1" lub npe="editor1">Texto inicial.</textarea>
            <hom input="submit" tus nqi="Submit" />
          </daim ntawv>  
        </lub cev>
      </HTML>
  10. odilon Txawm hais tias:

    não consigo inserir o texto no banco de dados de forma correta, pois fica tudo estranho

    ex:
    <p>&aacute; &eacute; &iacute;asd</p>
    á é

  11. Claudio Txawm hais tias:

    Olá Taylor, parabéns pelo post muito bem explicado. Desejo usar esse editor em uma aplicação PHP e gostaria de saber como criar um combo (ou botao) na toolbar que trouxesse dados do BD para inserir no texto? IE, ao clicar em um botão abriria uma caixa de diálogo com o resultado de uma consulta no banco para selecionar um registro.
    É possível?

  12. Glaydison Silva Txawm hais tias:

    Nyob zoo, qho zoo kawg thiab. Yuav kom muab ib qho tshiab? Xav tau kev pab kom muaj kev mus upload dluab ib lub pob, sib npaug zos rau qhov DEMO qhov twg koj txav tau rau tus neeg rau zaub mov thiab tej. Kuv tsis tau txhua txoj kev.

sau ntawv cia

Qhov koj email chaw nyob yuav tsis muab luam tawm. Search yog cim muaj *