Transforma TEXTAREA en editor (WYSIWYG | CKEditor)

Aí vai unha axuda rápida para ti integrar CKEditor as súas aplicacións web en só tres pasos.

Presentación

transformar as súas etiquetas TEXTAREA nun editor web xa non é unha tarefa complicada. De entre os varios editores que pode atopar en Internet, veremos ou facer uso CKEditor. Mira o editor en acción neste demostra.

instalación

Baixo o CKEditor en http://ckeditor.com/download. A versión utilizada neste post foi 3.6.4, de 17 xullo 2012. Extraia o ficheiro ckeditor_3.6.4.zip xunto a súa aplicación. un cartafol ckeditor crearase. pronto, agora pode facer a chamada dentro do seu código-fonte!

integración

O CKEditor é unha aplicación JavaScript. Para lelo, Só ten que facer unha simple chamada para el dentro das etiquetas HEAD do seu código fonte. feito isto, API JavaScript do CKEditor xa estará listo para ser utilizado. Teña en conta que de axustar o camiño do ficheiro ckeditor.js ao directorio no que se descomprimido.

paso 1Faça a chamada ao CKEditor
1
2
3
  <head>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  </head>
paso 2Crie um campo TEXTAREA
1
2
3
  <body>
    <textarea id="editor1" name="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
  </body>
paso 3Diga qual TEXTAREA (id) será substituído pelo CKEditor
1
2
3
4
5
6
7
  <head>
    <script type="text/javascript">
      window.onload = función()  {
        CKEDITOR.replace( 'editor1' );
      };
    </script>    
  </head>

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

Código completo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <head>
    <title>CKEditor</title>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
      window.onload = función()  {
        CKEDITOR.replace( 'editor1' );
     };
    </script>
  </head>
  <body>
    <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" />
    </form>  
  </body>
</html>

claro, agora você precisa fazer os ajustes conforme sua aplicação, a começar definindo o action do seu FORM, indicando a páxina que recuperar e tratar os datos sometidos a través POST.

O Artigo remata aquí, pero vou deixar algunhas perlas para os curiosos:

consellos

(1) Sen onload evento, clase con =”ckeditor”

Se asignar a clase “ckeditor” para o seu TEXTAREA, automaticamente xa será convertido nun CKEditor, sen que sexa preciso utilizar o script chamado polo evento “onload”, ben sinxelo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
  <head>
    <title>CKEditor</title>
    <contido meta="text/html; charset=utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  </head>
  <body>
    <form action="request.php" método="post">
      <textarea clase="ckeditor" id="editor1" name="editor1">&lt;p&gt;Valor inicial.&lt;/p&gt;</textarea>
      <tipo de entrada="submit" valor="Submit" />
    </form>  
  </body>
</html>

(2) Cambiar salto de liña <p> por <l />

Notei dous xeitos de intercambiar P por BR cando teclamos ENTER. A primeira, é configurar o parámetro enterMode con valor 2, xa que 1 = P, 2 = BR e 3 = DIV.

1
2
3
4
5
6
7
  <head>  
    <script type="text/javascript">
      window.onload = función() {
        CKEDITOR.replace( 'editor1', {enterMode: número(2)} );
      };
    </script>
  </head>

ou, Abre o arquivo config.js e establecer algo:

1
2
3
CKEDITOR.editorConfig = función( configuración ) {
  configuración.enterMode = CKEDITOR.ENTER_BR;
};

neste caso, ao escribir ENTER, temos as opcións:
CKEDITOR.ENTER_P - novo parágrafo P é creado;
CKEDITOR.ENTER_BR - salto de liña con BR;
CKEDITOR.ENTER_DIV - novo bloque con DIV é creado.

Recomendo pechar e abrir o navegador para ver o resultado

deste cambio, pois a cousa pode estar en caché! Se aínda así non funciona, limpe a caché do navegador.

(3) Cambiar a cor de fondo da barra de ferramentas do CKEditor

Como entender, podemos facer modificacións na nosa CKEditor atribuíndo parámetros directamente ao obxecto CKEDITOR ou vía arquivo config.js. Polo tanto, vou demostrar só dunha das formas:

1
2
3
4
5
6
7
  <head>  
    <script type="text/javascript">
      window.onload = función() {
        CKEDITOR.replace( 'editor1', {Nordwestlicher: 'FF0000 #'} );
      };
    </script>
  </head>

(4) Combinando parámetros de configuración do CKEditor

Os parámetros de configuración do CKEditor poden ser combinados. Para coñecer as posibilidades, Bótalle un ollo á API de configuración. exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
  <head>  
    <script type="text/javascript">
      window.onload = función() {
        CKEDITOR.replace( 'editor1', {  Nordwestlicher: 'CCC',
                                        enterMode: CKEDITOR.ENTER_P,
                                        CustomConfig : 'Ckeditor / outroConfig.js',
                                        lingua: 'Pt-l'        
                                      } 
                        );
      };
    </script>
  </head>

(5) Linguaxes soportadas polo CKEditor

O soporte CKEditor 58 linguas, incluida ou “gl”. Ver máis en User Interface Idiomas. O exemplo anterior demostra o seu uso.

(6) Personalizando a barra de ferramentas

– básico

Pode ser que non queira facilitar todos os recursos do CKEditor. entón, por que non optimizar a barra de ferramentas conforme a súa necesidade? Segue un exemplo deixando o editor ben básico.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <head>  
    <script type="text/javascript">
      window.onload = función() {
        CKEDITOR.replace( 'editor1', {
                           barra de ferramentas:
                           [
                             { name: 'Basicstyles', elementos : [ 'Negra','Cursiva' ] },
                             { name: 'N', elementos : [ 'NumberedList','BulletedList' ] },
                             { name: 'Ferramentas', elementos : [ 'Maximizar','-','Sobre' ] }
                           ]}         
                         );
      };
    </script>
  </head>

– completo

Segue abaixo un exemplo máis completo. Elimina os botóns que non desexa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <head>  
    <script type="text/javascript">
      window.onload = función() {
        CKEDITOR.replace( 'editor1', {
                           barra de ferramentas: [
                             { name: 'Documento', elementos : [ 'Fonte','-','Save','NEWPAGE',"DocProps ','Preview','Imprimir','-','Modelos' ] },
                             { name: 'Prancheta', elementos : [ 'Corte','Copiar','Paste','Texto Past','PasteFromWord','-','Undo','Refacer' ] },
                             { name: 'Edición', elementos : [ 'Buscar','Substituír','-','Seleccionar todo','-','SpellChecker', 'Scayt' ] },
                             { name: 'Formas', elementos : [ 'Forma', 'Caixa', 'Radio', 'TextField', 'Textarea', 'Select', 'Botón', 'ImageButton', 'HiddenField' ] },
                             '/',
                             { name: 'Basicstyles', elementos : [ 'Negra','Cursiva','Subliñado','Strike','Subscrito','Sobrescrito','-','RemoveFormat' ] },
                             { name: 'N', elementos : [ 'NumberedList','BulletedList','-','Outdent','Retirada','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                             { name: 'Links', elementos : [ 'Ligazón','Desvincular','Anchor' ] },
                             { name: 'Inserir', elementos : [ 'Imaxe','Flash','Táboa','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
                             '/',
                             { name: 'Estilos', elementos : [ 'Estilos','Format','Fonte','Tamaño de letra' ] },
                             { name: 'Cores', elementos : [ 'TextColor','Bgcolor' ] },
                             { name: 'Ferramentas', elementos : [ 'Maximizar', 'ShowBlocks','-','Sobre' ] }                            
                           ]}         
                         );
      }; 
    </script>
  </head>

– Moderado

Este é un exemplo máis moderado, cunha barra de ferramenta só, pero cos principais recursos. Nótese que, inclusivo, é posible combinar e determinar a altura e ancho do Editor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>  
  <script type="text/javascript">
    window.onload = función() {       
        CKEDITOR.replace( 'editor1', {
                           barra de ferramentas:
                           [
                             { name: 'Basicstyles', elementos : [ 'Negra','Cursiva','Subliñado' ] },
                             { name: 'N', elementos : [ 'NumberedList','BulletedList' ] },
                             { name: 'N', elementos : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { name: 'Estilos', elementos : [ 'Fonte','Tamaño de letra' ] },
                             { name: 'Cores', elementos : [ 'TextColor','Bgcolor' ] },
                             { name: 'Prancheta', elementos : [ 'Corte','Copiar','Paste','PasteFromWord','-','Undo','Refacer' ] },                             
                             { name: 'Ferramentas', elementos : [ 'Maximizar','-','Sobre' ] }
                           ],
                           ancho: "740px",
                           altura: "200px"}
                         );
    };
  </script>
</head>

(7) textarea (CKEditor) baleiro ao someter o formulario

Se o seu Textarea / CKeditor apareza en branco (branco) ao someter o formulario, pode usar este “artificio” que creei abaixo, que en realidade serve para pegar o contido do CKEditor e xogar no Textarea correspondente. Isto faise chamando a función setCKEditorToTextarea() no momento de facer clic no botón de enviar (botón enviar UO), onclick evento que normalmente non() do botón.

1
2
3
4
5
6
<script type="text/javascript">
      función setCKEditorToTextarea() {
        para(foi instanceName en CKEDITOR.casos)
          CKEDITOR.casos[instanceName].updateElement();            
      }
</script>

Palabras do creador

CKEditor é um editor de texto para ser usado dentro de páginas da web. É un editor WYSIWYG, o que significa que o texto que está a ser editado polo usuario será o máis parecido posible co publicado. El trae á web recursos de edición comúns, atopados en aplicacións de escritorio de edición, Como Microsoft Word e OpenOffice. Unha vez que o CKEditor está licenciado baixo licenzas “Código aberto” e comercial, está apto a usalo dentro de calquera tipo de aplicación. Este é o editor ideal para desenvolvedores, creado para ofrecer solucións fáciles e poderosas para os seus usuarios.

outros editores

fontes

Pra comezar iso! Consulte o sitio web do desenvolvedor para máis detalles.

Total de accesos: 58755

27 Comentarios sobre “Transforma TEXTAREA en editor (WYSIWYG | CKEditor)

  1. Moi legal o post, a parte á que desexo ultilizar é referente ao tema 6, tendo en conta que o CKEditor salva HTML o contido descrito no textarea que someter o texto a través do correo electrónico con formato HTML poren que salver no BD en formato txt mesmo. Ten algunha suxestión que eu poida ultilizar? :)

  2. Ronaldo dixo:

    camiño, estou a desenvolver un proxecto e un form ten dous campos TEXTAREA.
    Está a usar o CKEditor en ambas.

    rexistro – esquerda

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

    rexistro – dereita

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

    O editor se aplica correctamente. Pero cando proceso o form nun ficheiro PHP só recibe datos do primeiro campo eo segundo vai baleira.

    É un problema co CKEditor? porque se non usalo recibo datos dos dous campos normalmente
    .
    Usei a estrutura suxerida polo propio sitio web do CKeditor.

    • Ola Ronaldo, fixen unha proba aquí e non houbo problema. Faga o seguinte, tome o código embaixo, coloque nun ficheiro “teste.php” dentro do seu servidor, pero illado da súa aplicación que está dando problema. Teña en conta que ao enviar o formulario con dous textarea (CKEditor), os datos serán enviados normalmente.

      arquivo teste.php (DOUS 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>
        <head>
          <title>CKEditor</title>
          <meta content="text/html; charset=utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
          <script type="text/javascript">
            window.onload = function()  {
              CKEDITOR.replace( 'editor1' );
              CKEDITOR.replace( 'Editor2' );
           };
          </script>
        </head>
        <body>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Valor inicial 1</textarea>
            <textarea id="editor2" name="editor2">valor inicial de 2</textarea>
            <input type="submit" value="Submit" />
          </form>  
        </body>
      </html>
      <?php eco 'Editor de 1 ---> '.@$_REQUEST['editor1'].'<l />'; ?>
      <?php eco 'Editor de 2 ---> '.@$_REQUEST['Editor2'].'<l />'; ?>
  3. Ronaldo dixo:

    Tente pasar o código pero creo que non foi publicado. Pero entendeu que o problema né? Se usar CKEditor só unha das textarea envía datos a outra queda baleira.

    • Ok, creo que entendín. Conforme demostrado anteriormente, non tiven o mesmo problema. Polo tanto, reanálise seu código, vexa se non ten máis dun campo (entrada) co mesmo nome (name). abrazos!

      • Ronaldo dixo:

        Resolvín coa súa propia información…. (6) textarea (CKEditor) baleiro ao someter o formulario

        Bastou colocar a función alí e ok :) Esa forma q vc pasou é utilizando PHP né? Mesmo as páxinas sendo en PHP implantei editor usando JavaScript.
        Valeu polas suxestións

        aproveitando aínda sabendo q non é o tema do post, eu programo a moito tempo con Java e .NET e en PHP a menos tempo e Tô collendo con conversión de data en cadea. Non ten unha función directa, como para datos de cadea (strtotime) nin? Creo q vc sabe PHP moito máis q eu. Se sabe esa parada manda pro meu correo ronaldodantas2@gmai.com

        Non precisa publicar este comentario. Valeu polas suxestións.

  4. Fernando dixo:

    ¿Como activar o carácter especial de º(PRIMEIRO 1.º) e ª(SEGUNDA 2º) Sen que eu Prema na ferramenta inserir caracteres especiais? Quere facelo ao escribir no propio teclado sen abrir ningunha xanela.

    • camiño, proba aquí e só facer da forma convencional que funciona, é dicir, Manteña a tecla ALT e escriba a secuencia de números correspondente ao símbolo desexado. exemplo: ALT + 166 = ª e ALT + 167 = º. falou!

  5. James dixo:

    Bos días, cara moi bo o seu post, estou empezando a traballar con javascript agora, e realizar precisando crear un editor de texto, penso en usar o ckeditor, porén to con dificultade para conseguir manipular el, tipo só quería que tivese , gardar, novo, desfacer, refacer, colar, copia, e unha caixa de selección de idioma, só que en vez de ser a forma de escritura, sería linguaxes de programación, e despois tería que manipular os datos recibidos, tipo como un editor de código fonte normal, só que en liña, se poida me axudar.

    • opa, iso aí pode ser algo co editor que está a usar para escribir o código. Intente un bloque de notas común e introduce o código HTML do exemplo, e vexa se o problema permanece.

      Probe definir políticas que din a súa páxina que conxunto charset usar (ISO 8859-1-UO UTF-8).

      1
      2
      3
      4
      5
      
      <body>
        <head>
            <meta charset="UTF-8">
        </head> 
      ...

      Se está a usar PHP, Define o charset no inicio do código, antes de calquera cousa:

      1
      
        <?php cabeceira("Content-Type: text / html;  charset = ISO-8859-1",verdadeiro) ?>

      ou aínda, tente cambiar o contido das peticións mediante o charset correcto:

      1
      
        htmlentities( utf8_decode($_POST['Variable']) );

      O feito é que o problema que citou non parece ser do CKEditor, ata por que eu uso el en varias aplicacións e non teño problema algún con caracter especial. Proba tamén o DEMO na páxina web do creador, e non vin problema. vexa aí: http://ckeditor.com/demo

  6. Marcio dixo:

    Boa tarde estou tentando incorporarse o texto escrito no Textarea vía JavaScript para enviar para a base de datos pero non estou conseguindo, Ten algún método para obter o texto?
    Grazas

  7. boa tarde.
    Estou pensando en usar este dispositivo para receitario médico – algo mooooi simple mesmo.
    – Quería saber como configurar a barra superior (onde fica as funcionalidades) ser escondidos (tipo un botãozinho que faga ela desaparecer tras editar o texto)
    – Tamén como fago para sumir coa barra inferior (onde aparece “body” e outros etiquetas) ?
    – Como torno a caixa de texto cun “altura” automático: tipo, se eu prescribir 10 medicamentos a caixa vai encompridando mentres eu sexa escribindo… Se eu escribir só 1 medicación a caixa queda á altura do que eu escriba…

    • Ola, Sentímolo, había algúns cortes (fallos) no seu código, polo que acabo eliminando o.

      Con relación a isto que precisa, é perfectamente posible, pero suxiro buscar algún profesional que entenda de JavaScript para axudar.

      Vou só dicir o camiño das pedras:

      – Agochar a barra de ferramenta (barra de ferramentas):

      1
      2
      3
      
      foi editor = CKEDITOR.en liña( 'editor1', {
          removePlugins: 'Barra de ferramentas'
      } );

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

      – Aumentar a altura automaticamente (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (demostración)

      exemplo:

      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>
        <head>
          <title>CKEditor</title>
          <contido meta="text/html; charset=utf-8" http-equiv="content-type" />
          <src guión="http:////cdn.ckeditor.com/4.5.3/basic/ckeditor.js"></script>
          <src guión="plugin.js"></script>  <!-- obter plugin.JS en http://ckeditor.com/addon/autogrow ->  
          <script type="text/javascript">
           window.onload = función()  {
              CKEDITOR.replace( 'editor1', {             
                  removePlugins: 'Elementspath', 
                  removePlugins: 'Barra de ferramentas',
                  extraPlugins: 'Autogrow',
                  autoGrow_minHeight: 70,
                  altura: '70px'
              });
           };
          </script>
        </head>
        <body>
          <form action="request.php" método="post">
            <textarea id="editor1" name="editor1">texto inicial.</textarea>
            <tipo de entrada="submit" valor="Submit" />
          </form>  
        </body>
      </html>
  8. Claudio dixo:

    Ola Taylor, Parabéns polo post moi ben explicado. Desexo usar este editor nunha aplicación PHP e quere saber como crear un combo (ou botón) na toolbar que trouxese datos da base de datos para introducir no texto? é dicir, Premendo no botón abriría un cadro de diálogo co resultado dunha consulta na base para seleccionar un rexistro.
    É posible?

  9. Glaydison Silva dixo:

    Ola, gran post. Podería suxerir un novo post? Necesito axuda para aplicar un botón para subir imaxes, igual á DEMO onde é posible subir ao servidor e tal. Non podo de ningún xeito.

Deixe unha resposta

O seu enderezo de correo-e non será publicado. Os campos obrigatorios están marcados con *