A su vez TEXTAREA editor (WYSIWYG | CKEditor)

Aquí le damos una ayuda rápida para integrar CKEditor con aplicaciones Web en tres pasos.

Presentación

Gire su Etiquetas TEXTAREA en un editor de Web no es una tarea complicada. Entre los muchos editores que puedes encontrar en Internet, Vemos el uso de CKEditor. Ver el editor en acción en este VERSIÓN PARCIAL DE PROGRAMA.

Instalación

Descargar CKEditor en http://ckeditor.com/download. La versión utilizada en este Post fue 3.6.4, de 17 Julio 2012. Extraer el archivo ckeditor_3.6.4.zip junto con su solicitud. Una carpeta CKEditor se creará. Pronto, ahora a hacer la convocatoria dentro del código fuente!

Integración

El CKEditor es una aplicación JavaScript. Para leerlo, sólo hacer una simple llamada a él dentro de la Etiquetas CABEZA de su código fuente. Hecho esto, la API de Javascript de la CKEditor ya estará lista para su uso. Recuerde ajustar la ruta del archivo CKEditor.js en el directorio donde has descomprimido.

Paso 1 – Hacer llamada a CKEditor
1
2
3
  <cabeza>
    <tipo de secuencia de comandos="text/javascript" fuente="ckeditor/ckeditor.js"></secuencia de comandos>
  </cabeza>
Paso 2 – Crear un campo TEXTAREA
1
2
3
  <cuerpo>
    <Identificación de área de texto="editor1" nombre="editor1">&Lt;p&GT;Valor inicial.&Lt;/p&GT;</TextArea>
  </cuerpo>
Paso 3 – Estado TEXTAREA (ID) se reemplazará con CKEditor
1
2
3
4
5
6
7
  <cabeza>
    <tipo de secuencia de comandos="text/javascript">
      ventana.OnLoad = función()  {
        CKEDITOR.Vuelva a colocar( 'editor1' );
      };
    </secuencia de comandos>    
  </cabeza>

Pronto, ya funciona! No creo que? Guardar, cualquiera que sea la “F5” en el explorador y ver por ti mismo… el código completo de este aspecto:

Código completo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
  <cabeza>
    <Título>CKEditor</Título>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></secuencia de comandos>
    <tipo de secuencia de comandos="text/javascript">
      ventana.OnLoad = función()  {
        CKEDITOR.Vuelva a colocar( 'editor1' );
     };
    </secuencia de comandos>
  </cabeza>
  <cuerpo>
    <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" />
    </forma>  
  </cuerpo>
</HTML>

Claro, Ahora usted necesita hacer los ajustes como la aplicación, a partir de establecer la acción de su forma, indicando que la página recuperará y proceso de los datos presentaron por el POST.

El artículo termina aquí, pero voy a dejar algunas perlas más para los curiosos:

Consejos

(1) Ningún evento onload, con la clase =”CKEditor”

Si se asigna la clase “CKEditor” a tu TEXTAREA, Se convertirán automáticamente a un CKEditor, sin necesidad de utilizar el script llamado por evento “OnLoad”, bien simple:

1
2
3
4
5
6
7
8
9
10
11
12
13
<HTML>
  <cabeza>
    <Título>CKEditor</Título>
    <contenido de meta="text/html; charset = utf-8" http-equiv="content-type" />
    <tipo de secuencia de comandos="text/javascript" fuente="ckeditor/ckeditor.js"></secuencia de comandos>
  </cabeza>
  <cuerpo>
    <acción de forma="request.php" método="post">
      <TextArea clase="ckeditor" ID="editor1" nombre="editor1">&Lt;p&GT;Valor inicial.&Lt;/p&GT;</TextArea>
      <tipo de entrada="submit" valor="Submit" />
    </forma>  
  </cuerpo>
</HTML>

(2) Salto de línea de cambio <p> por <br />

Me di cuenta de dos formas de intercambiar P BR cuando teclamos. El primero, se establece el parámetro enterMode con valor 2, Desde 1 = P, 2 = BR y 3 = DIV.

1
2
3
4
5
6
7
  <cabeza>  
    <tipo de secuencia de comandos="text/javascript">
      ventana.OnLoad = función() {
        CKEDITOR.Vuelva a colocar( 'editor1', {enterMode: Número(2)} );
      };
    </secuencia de comandos>
  </cabeza>

O, Abra el archivo config.js y algo así como:

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

En este caso, Cuando se ingresa ENTER, Tenemos las opciones:
CKEDITOR. ENTER_P – nuevo apartado P se crea;
CKEDITOR. Rotura de la línea ENTER_BR con BR;
CKEDITOR. ENTER_DIV-nuevo bloque con el DIV se crea.

Recomendamos cerrar y abrir el navegador para ver el resultado

Este cambio, debido a puede ser almacenado en caché! Si todavía no funciona, limpiar la caché del navegador.

(3) Cambiar el color de fondo de la barra de herramientas de CKEditor

Como notado, Podemos hacer cambios en nuestra CKEditor asignar parámetros directamente el CKEDITOR o vía archivo config.js. Por lo tanto, Te demuestro una:

1
2
3
4
5
6
7
  <cabeza>  
    <tipo de secuencia de comandos="text/javascript">
      ventana.OnLoad = función() {
        CKEDITOR.Vuelva a colocar( 'editor1', {uicolor: '#ff0000'} );
      };
    </secuencia de comandos>
  </cabeza>

(4) Combinación de parámetros de configuración de la CKEditor

Pueden combinar los parámetros de configuración de la CKEditor. Conocer las posibilidades, Echa un vistazo a la Configuración de API. Ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
  <cabeza>  
    <tipo de secuencia de comandos="text/javascript">
      ventana.OnLoad = función() {
        CKEDITOR.Vuelva a colocar( 'editor1', {  uicolor: '#ccc',
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : 'ckeditor/outroConfig.js',
                                        idioma: 'en'        
                                      } 
                        );
      };
    </secuencia de comandos>
  </cabeza>

(5) Idiomas en CKEditor

Los soportes de CKEditor 58 Idiomas, incluyendo la “en”. Ver más en Idiomas de interfaz de usuario. En el ejemplo anterior se muestra su uso.

(6) Personalizar la barra de herramientas

– Conceptos básicos

Usted no puede proporcionar todas las características de CKEditor. Por lo tanto, Por qué no optimizar la barra de herramientas según su necesidad? El siguiente es un ejemplo dejar el editor muy básico.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <cabeza>  
    <tipo de secuencia de comandos="text/javascript">
      ventana.OnLoad = función() {
        CKEDITOR.Vuelva a colocar( 'editor1', {
                           barra de herramientas:
                           [
                             { nombre: 'basicstyles', artículos : [ 'Negrita','Cursiva' ] },
                             { nombre: «párrafo», artículos : [ 'NumberedList','BulletedList' ] },
                             { nombre: 'herramientas', artículos : [ 'Maximizar','-','Acerca de' ] }
                           ]}         
                         );
      };
    </secuencia de comandos>
  </cabeza>

– Completa

El siguiente es un ejemplo completo. Quitar los botones que no desea.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <cabeza>  
    <tipo de secuencia de comandos="text/javascript">
      ventana.OnLoad = función() {
        CKEDITOR.Vuelva a colocar( 'editor1', {
                           barra de herramientas: [
                             { nombre: 'documento', artículos : [ 'Código fuente','-','Guardar','NewPage','DocProps','Vista previa','Print','-','Plantillas' ] },
                             { nombre: 'portapapeles', artículos : [ 'Corte','Copia','Pegar','PasteText','PasteFromWord','-','Deshacer','Rehacer' ] },
                             { nombre: 'edición', artículos : [ 'Buscar','Reemplazar','-','SelectAll','-',"Corrector ortográfico", 'Scayt' ] },
                             { nombre: 'formas', artículos : [ 'Forma', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Seleccionar', 'Botón', 'ImageButton', 'HiddenField' ] },
                             '/',
                             { nombre: 'basicstyles', artículos : [ 'Negrita','Cursiva','Subrayado','Huelga','Subíndice','Superíndice','-','RemoveFormat' ] },
                             { nombre: «párrafo», artículos : [ 'NumberedList','BulletedList','-',Anular la 'sangría','Guión','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                             { nombre: 'enlaces', artículos : [ 'Enlace','Desvincular','Ancla' ] },
                             { nombre: 'insertar', artículos : [ 'Imagen','Flash','Mesa','HorizontalRule','Smiley','SpecialChar',«Salto de página»,'Iframe' ] },
                             '/',
                             { nombre: 'estilos', artículos : [ 'Estilos','Formato','Fuente','FontSize' ] },
                             { nombre: 'colores', artículos : [ 'TextColor','BGColor' ] },
                             { nombre: 'herramientas', artículos : [ 'Maximizar', 'ShowBlocks','-','Acerca de' ] }                            
                           ]}         
                         );
      }; 
    </secuencia de comandos>
  </cabeza>

– Moderado

Este es un ejemplo más moderado, con una herramienta de la barra única, pero con las características principales. Tenga en cuenta que, incluyendo, Es posible combinar y determinar la altura y anchura del Editor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<cabeza>  
  <tipo de secuencia de comandos="text/javascript">
    ventana.OnLoad = función() {       
        CKEDITOR.Vuelva a colocar( 'editor1', {
                           barra de herramientas:
                           [
                             { nombre: 'basicstyles', artículos : [ 'Negrita','Cursiva','Subrayado' ] },
                             { nombre: «párrafo», artículos : [ 'NumberedList','BulletedList' ] },
                             { nombre: «párrafo», artículos : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { nombre: 'estilos', artículos : [ 'Fuente','FontSize' ] },
                             { nombre: 'colores', artículos : [ 'TextColor','BGColor' ] },
                             { nombre: 'portapapeles', artículos : [ 'Corte','Copia','Pegar','PasteFromWord','-','Deshacer','Rehacer' ] },                             
                             { nombre: 'herramientas', artículos : [ 'Maximizar','-','Acerca de' ] }
                           ],
                           Ancho: "740px",
                           altura: "200px"}
                         );
    };
  </secuencia de comandos>
</cabeza>

(7) TextArea (CKEditor) vacío al momento de enviar el formulario

Si su Textarea/CKeditor aparece en blanco (vacío) Al enviar el formulario, Se puede usar este “Fuegos artificiales” He creado por debajo de, que realmente sirve para obtener el contenido del CKEditor y jugar en el área de texto correspondiente. Esto se hace llamando a la función setCKEditorToTextarea() Al hacer clic en el botón Enviar (enviar o el botón), normalmente en el evento onclick() el botón de.

1
2
3
4
5
6
<tipo de secuencia de comandos="text/javascript">
      función setCKEditorToTextarea() {
        es(var InstanceName en CKEDITOR.instancias de)
          CKEDITOR.instancias de[InstanceName].updateElement();            
      }
</secuencia de comandos>

Palabras del desarrollador

CKEditor es un editor de texto para ser utilizado dentro de páginas web. Es un editor WYSIWYG, lo que significa que el texto está editado por el usuario será tan cercano como sea posible con la que se publica. Él trae a las funciones de edición comunes de web, encontrado en aplicaciones de edición de escritorio, como Microsoft Word y OpenOffice. Una vez que el CKEditor es licenciada bajo licencias “Open Source” y mercantil, que son capaces de utilizar en cualquier tipo de aplicación. Este es el editor ideal para desarrolladores, diseñado para proporcionar soluciones de gran alcance y fácil a sus usuarios.

Otros editores

Fuentes

En primer lugar es que! Ver sitio web del desarrollador para más detalles.

Total hits: 59017

27 Comentarios sobre “A su vez TEXTAREA editor (WYSIWYG | CKEditor)

  1. Genial post, la parte que desea utilizar está relacionado con el tema 6, teniendo en cuenta que el CKEditor guarda en su contenido html que se describe dentro del textarea necesita enviar el texto vía correo electrónico con formato html pero necesita para guardar en la BD en formato txt igual. Tienes alguna sugerencia que pueda usar? :)

  2. Ronaldo dijo:

    Cara, Estoy desarrollando un proyecto y una forma tiene dos campos textarea.
    Estoy usando el CKEditor en ambos.

    Horas de oficina – Izquierda

    CKEDITOR. Vuelva a colocar( ' expedienteEsq’ );
    CKEDITOR.add

    Horas de oficina – Correcto

    CKEDITOR. Vuelva a colocar( ' expedienteDir’ );
    CKEDITOR.add

    El editor se aplica correctamente. Pero cuando la forma de procesar un archivo php sólo recibe datos desde el primer campo y se anulará la segunda.

    Es un problema con CKEditor? porque si no lo usas me dan datos de dos campos normalmente
    .
    Usé la estructura sugerida por el propio sitio el CKeditor.

    • Hola Ronaldo, Hice una prueba de aquí y no había ningún problema. Hacer lo siguiente, coge el código de abajo, poner en un archivo “test.php” dentro de su servidor, pero aislado de la aplicación que está dando problema. Tenga en cuenta que al enviar el formulario con dos textarea (CKEditor), normalmente se enviará los datos.

      Archivo teste.php (DOS ÁREAS DE TEXTO SIMULTÁNEAS)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <HTML>
        <cabeza>
          <Título>CKEditor</Título>
          <meta content="text/html; charset = utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></secuencia de comandos>
          <script type="text/javascript">
            Window.onload = function()  {
              CKEDITOR. Vuelva a colocar( 'editor1' );
              CKEDITOR. Vuelva a colocar( 'editor2' );
           };
          </secuencia de comandos>
        </cabeza>
        <cuerpo>
          <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" />
          </forma>  
        </cuerpo>
      </HTML>
      <?PHP echo ' Editor de 1 ---> '.@$_ SOLICITUD['editor1'].'<br />'; ?>
      <?PHP echo ' Editor de 2 ---> '.@$_ SOLICITUD['editor2'].'<br />'; ?>
  3. Ronaldo dijo:

    He intentado pasar el código pero no creo que se publicó. Pero sabes lo que está mal con la derecha? CKEditor uso de textarea envía datos a otro están vacíos.

    • Ok, Creo que entiendo. Como se muestra arriba, No tengo el mismo problema. Por lo tanto, reanalise el código, ver si no tienes más de un campo (entrada) con el mismo nombre (nombre). Abrazos!

      • Ronaldo dijo:

        Decidió con su propio Consejo…. (6) TextArea (CKEditor) vacío al momento de enviar el formulario

        Bastou colocar una e de lá função ok :) Essa forma q vc sólo é usando php né? Incluso las páginas en php implementa el editor mediante javascript.
        Gracias por los consejos

        aprovechar a pesar de q no es el tema del post, Programa tiempo con java y .net y php en menos tiempo y estoy recogiendo con conversión de fecha a string. No tiene una función directa, Cómo string a fecha (strtotime) Correcto? Crees que sabes php bueno mas q yo. Si conoces esta cosa enviar a mi correo ronaldodantas2@GMAI.com

        No hay necesidad de publicar este comentario. Gracias por los consejos.

  4. Hola Taylor muy buena tu post.

    Ya instalado y estoy usando funciona bien. Tengo una duda, por ejemplo en tu blog escribiste en cajas amarillas con secuencias de comandos. Cómo hiciste esto? Y una característica en ckeditor?

    Gracias

  5. Fernando dijo:

    Cómo habilito el carácter especial de th(1 PRIMERA) y th(2 º SEGUNDO) A MENOS QUE HAGA CLIC EN INSERTAR CARÁCTER ESPECIAL? ME GUSTARÍA HACER ESTO AL ESCRIBIR EN EL TECLADO SÍ MISMO SIN NECESIDAD DE ABRIR NINGUNA VENTANA.

    • Cara, prueba aquí y hacer la forma convencional que funciona, IE, Mantenga pulsada la tecla ALT y escriba la secuencia de números correspondiente al símbolo deseado. Ejemplo: ALT + 166 = Rd y ALT + 167 = º. Dijo!

  6. James dijo:

    Buenos días, muy bueno tu post, Estoy empezando a trabajar con javascript, ahora, y necesito crear un editor de, Pensé que sería usar el ckeditor, pero con la dificultad para poder manipularlo, Sólo deseo que escriba , Guardar, Nuevo, Deshacer, Redo, Pasta, copia, y una selección de idioma, sólo en lugar de ser una forma de escritura, Lo que lenguajes de programación, y entonces tendrían que manejar los datos recibidos, algo así como un editor de código fuente normal, sólo en línea, Si usted me puede ayudar.

  7. Amigo, He instalado bien, pero un pequeño problema que estoy enfrentando es que transforma los caracteres especiales en código html como es â â y yo quería que ser de todos modos para mi base de datos, tiene como?

    • Abuelo, exista algo con el editor que está utilizando para escribir el código. Intenta usar un bloc de notas y escriba el ejemplo completo de código HTML, y ver si el problema sigue siendo.

      Intentar también establecer políticas que dicen en su página que charset usar (ISO-8859-1 o UTF-8).

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

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

      1
      
        <?PHP cabecera("Content-Type: texto/html;  charset = ISO-8859-1",VERDADERO) ?>

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

      1
      
        htmlentities( utf8_decode($_ EL POST['variable']) );

      El hecho es que el problema que cita no parece el CKEditor, a por qué usarla en varias aplicaciones ya no tengo ningún problema con carácter especial. También prueba el DEMO en el sitio web del desarrollador, y vi no hay problema. Véase allí: http://ckeditor.com/demo

  8. Marcio dijo:

    Buenas tardes estoy tratando de obtener el texto en el componente textArea mediante javascript para enviar a la base de datos pero no puedo, hay ningún método para obtener el texto?
    Gracias

  9. Buenas tardes.
    Estoy pensando en usar este dispositivo médico de prescripción – algo tan simple incluso.
    – Quiero saber como configurar la barra superior (Dónde está la funcionalidad) ocultar (como un pequeño botón para hacerla desaparecer después de editar el texto)
    – También cómo me deshago de la barra inferior (donde aparece “cuerpo” y otras etiquetas) ?
    – Cómo hacer el cuadro de texto con un “altura” Automático: tipo, Si prescriben 10 el cuadro será encompridando medicamentos mientras yo estoy escribiendo… Si escribo sólo 1 el medicamento esté a la altura de la caja que escriba…

    • Hola, Lo siento, Hubo algunos cortes (fallas) en el código, así que acabé sacándola.

      Por esto necesita, Es perfectamente posible, pero yo sugeriría en busca de un profesional que entiende JavaScript para ayudarle a.

      Yo sólo diré la manera de piedras:

      – Ocultar barra de herramientas (barra de herramientas):

      1
      2
      3
      
      var Editor = CKEDITOR.en línea( 'editor1', {
          removePlugins: 'toolbar'
      } );

      – Ocultar pie de página (elementspath):
      http://ckeditor.com/forums/CKEditor-3.x/Disabling-Elements-Path-Display

      – Aumentar la altura automáticamente (crecimiento automático):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (demostración)

      Ejemplo:

      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>
        <cabeza>
          <Título>CKEditor</Título>
          <contenido de meta="text/html; charset = utf-8" http-equiv="content-type" />
          <script src="http:////CDN.CKEditor.com/4.5.3/Basic/CKEditor.js"></secuencia de comandos>
          <script src="plugin.js"></secuencia de comandos>  <!-- obtener plugin.JS en http://CKEditor.com/addon/autogrow-->  
          <tipo de secuencia de comandos="text/javascript">
           ventana.OnLoad = función()  {
              CKEDITOR.Vuelva a colocar( 'editor1', {             
                  removePlugins: 'elementspath', 
                  removePlugins: 'toolbar',
                  extraPlugins: 'crecimiento',
                  autoGrow_minHeight: 70,
                  altura: '70px'
              });
           };
          </secuencia de comandos>
        </cabeza>
        <cuerpo>
          <acción de forma="request.php" método="post">
            <Identificación de área de texto="editor1" nombre="editor1">Texto inicial.</TextArea>
            <tipo de entrada="submit" valor="Submit" />
          </forma>  
        </cuerpo>
      </HTML>
  10. Claudio dijo:

    Hola Taylor, Felicitaciones por el post muy bien explicado. Quiero utilizar este editor en una aplicación PHP y quisiera saber como crear un combo (o botón) en la barra de herramientas para traer datos de la BD para insertar en el texto? IE, Al hacer clic en un botón abra un cuadro de diálogo con el resultado de una consulta para seleccionar un registro.
    Puedes?

  11. Glaydison Silva dijo:

    Hola, Gran post. Podría sugerir un nuevo post? Necesita ayuda para implementar un botón para subir imágenes, igual a la demostración donde puede subir al servidor y tal. No puedo de ninguna manera.

Contesta

Su dirección de correo electrónico no será publicado. Campos requeridos están marcados con *