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>
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>
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:
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.
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>
<
script type="text/javascript" src="/ckeditor/ckeditor.js"></script>` para poder reproducir el problema en el editor de código de stackoverflow.