1

No me sale ckeditor añadido.

Y éste es mi código:

<script>
  CKEDITOR.replace('prueba');
</script>
<textarea name="prueba" id="prueba" class="form-control"></textarea>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
13
  • ¿Qué es lo que no te funciona? Commented el 12 may. 2017 a las 9:30
  • Lo único que he cambiado ha sido tu <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>` para poder reproducir el problema en el editor de código de stackoverflow. Commented el 12 may. 2017 a las 9:31
  • me aparece un textarea normal no el de ckeditor.
    – bsg
    Commented el 12 may. 2017 a las 9:31
  • ¿Podrías proporcionarme la URL en la que te ocurre? Si es un desarrollo local, ¿podrías comprobar la consola de depuración para ver si te fallaba la carga del javascript? Commented el 12 may. 2017 a las 9:32
  • me pone a no esta definido, y es en la linea de un archivo de ckeditor
    – bsg
    Commented el 12 may. 2017 a las 9:35

2 respuestas 2

3

Según parece has descargado correctamente ckeditor pero has intentado llamar a una función antes de haber sido definida en su archivo de script.

A continuación te enumero diferentes errores que se pueden producir por hacer la llamada a una función javascript en un momento erróneo y al final te explico qué ventajas tiene la ejecución asíncrona del trabajo.

(MAL) Ejecución antes de cargar ckeditor

<script type="text/javascript">
	CKEDITOR.replace('prueba');
</script>
<textarea name="prueba" id="prueba" class="form-control"></textarea>
<script src="//cdn.ckeditor.com/4.6.2/basic/ckeditor.js"></script>

Provoca un error Uncaught ReferenceError: CKEDITOR is not defined porque has intentado llamar a una función que se define en un script cargado posteriormente.

(MAL) Ejecutar antes de generar el DOM

<script src="//cdn.ckeditor.com/4.6.2/basic/ckeditor.js"></script>
<script type="text/javascript">
	CKEDITOR.replace('prueba');
</script>
<textarea name="prueba" id="prueba" class="form-control"></textarea>

En este caso se genera un error del tipo Uncaught TypeError: Cannot read property 'getEditor' of undefined debido a que hemos intentado acceder a un elemento del DOM antes de generarlo.

Orden correcto

<textarea name="prueba" id="prueba" class="form-control"></textarea>
<script src="//cdn.ckeditor.com/4.6.2/basic/ckeditor.js"></script>
<script type="text/javascript">
	CKEDITOR.replace('prueba');
</script>

Todos los scripts deben cargarse al final del documento HTML para que se interprete su contenido sin esperar a la carga de éstos.

Uso de async y defer para acelerar la carga de la página

En esta página web puedes ver cómo se pueden usar async y defer para hacer ésto definiendo los scripts en la parte superior, para obtener la misma funcionalidad, pero en ese caso no puedes ejecutar el script al final del documento, si no que debes esperar al evento onload o bien de window o bien del propio script:

<textarea name="prueba" id="prueba" class="form-control"></textarea>
<script src="//cdn.ckeditor.com/4.6.2/basic/ckeditor.js" defer onload="trabaja()"></script>
<script type="text/javascript">
  function trabaja() {
	  CKEDITOR.replace('prueba');
  }
</script>

Si se usa defer en vez de async no importaría el orden en el que pongas las cosas en el documento ya que el javascript no se ejecuta hasta finalizar la carga tanto del propio script como del HTML y, por lo tanto, se garantiza que prueba está en el DOM cuando se llame a trabaja() en el evento onload y que esta función ha sido también definida.

Si usáramos async entonces simplemente deberíamos asegurarnos que se define prueba y la función trabaja() antes de cargar el javascript de ckeditor.js para asegurarnos que la función está definida en el momento de la carga y que ya existe el elemento en el DOM.


La principal ventaja de la carga asíncrona es que la página no se detiene durante el tiempo que dura la descarga del javascript y su ejecución, haciendo que aparentemente la página cargue en menos tiempo:

Gráfico ilustrativo

Aunque recomiendo, aún así, poner todo en el orden correcto para que no falle la carga en navegadores muy antiguos y, además, ganemos en velocidad de carga en los nuevos.

2

Con tu código puesto así funciona:

<script src="//cdn.ckeditor.com/4.6.2/basic/ckeditor.js"></script>
<textarea name="prueba" id="prueba" class="form-control"></textarea>
<script type="text/javascript">
    CKEDITOR.replace('prueba');
</script>
6
  • tengo solo eso y un menú y un pie.
    – bsg
    Commented el 12 may. 2017 a las 9:38
  • prueba a cargar el script desde el cdn por si es un problema de tu copia local
    – Carmen
    Commented el 12 may. 2017 a las 9:40
  • A eso es a lo que voy con mis comentarios. Recuerda que debes comentar en su pregunta, no como respuesta (si empiezan a entrar a esta pregunta y ven tu respuesta puede ser que te lleves algún negativo). Commented el 12 may. 2017 a las 9:40
  • vale me funciono lo de cdn muchas gracias
    – bsg
    Commented el 12 may. 2017 a las 9:44
  • 1
    El objetivo es encontrar su error. Si ha descargado el script y lo quiere usar en local, habrá que indicarle por qué no lo carga. Si no lo ha descargado hay que indicarle que use el CDN. La respuesta se escribe cuando uno tiene certeza de cuál es la solución al problema que se plantea. Commented el 12 may. 2017 a las 9:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.