javascript - body - Como cargar el editor de ace
title html (4)
Estoy tratando de usar la biblioteca del editor de código de Ace ( http://ace.ajax.org/ ), pero tengo problemas. De acuerdo con la guía de incrustación, esto debería cargar los archivos js requeridos de Amazons CDN.
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
Sin embargo falla, en la consola de Chromes muestra:
Could not load worker ace.js:1
DOMException {message: "SecurityError: DOM Exception 18", name: "SecurityError", code: 18, stack: "Error: An attempt was made to break through the se…cloudfront.net/src-min-noconflict/ace.js:1:76296)", INDEX_SIZE_ERR: 1…}
ace.js:1
También intenté poner la carpeta src-min de la biblioteca ace localmente y cargarla con
<script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
Lo que también falló con los errores:
Uncaught RangeError: Maximum call stack size exceeded
GET http://mysite/mode-javascript.js 404 (Not Found) 123f2c9_ace_1.js:1
GET http://mysite/notes/theme-monokai.js 404 (Not Found) 123f2c9_ace_1.js:1
Uncaught RangeError: Maximum call stack size exceeded
Por último, intenté cargar todos los recursos js en la carpeta as src-min, que también falló con errores: S
La respuesta correcta está en el primer comentario:
Pruebe este editor.getSession (). SetUseWorker (false); y ver si todavía falla. Local no funcionará porque depende de otros archivos relativos en línea. Es por eso que los GET relativos están fallando. No estoy recibiendo ningún error al utilizar el primer enlace en línea. ¿Tal vez algo más está interrumpiendo tu javascript? ¿Puede mostrar una versión más completa de su archivo HTML / JS?
- Allendar , 24 de marzo a las 14:25.
Me enfrenté a problemas al tratar de hacer esto. El código dado en la página de inicio de ACE no me funcionó. Tenía todos mis archivos en el directorio local, pero puede usar un CDN si lo desea.
Coloqué el directorio ace de lib/ace en mi directorio static/ . Cambie esa parte a su propia ubicación.
Tuve que usar Require.js api para cargar ace. Este es el código que me funcionó:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="editor">
function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
<script type="text/javascript" src="/static/require.js"></script>
<script>
require.config({
baseUrl: window.location.protocol + "//" + window.location.host
+ window.location.pathname.split("/").slice(0, -1).join("/"),
paths: {
ace: "/static/ace"
}
});
require(["ace/ace"], function (ace) {
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
});
</script>
</body>
</html>
Fuente: https://github.com/ajaxorg/ace/issues/1017
Revisa esta página si recibes algunos errores locos: http://requirejs.org/docs/errors.html
No puedo pegar todo el código en el comentario, así que comenzaré a responder tu pregunta actualizando esta. Esto funciona bien para mi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="editor">
function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
</script>
</body>
</html>
¿Puedes probar esto al final y ver si todavía tienes los problemas? Si este código (singular) está bien, es probable que algún otro JavaScript afecte a ACE.
Aquí hay un JSfiddle: http://jsfiddle.net/yDscY/ . No tengo errores en mi Inspector de Desarrollo.
Encontré el problema. Si tienes PHP o puedes hacerlo con .htaccess. Debe enviar encabezados específicos para cumplir con CORS (Intercambio de recursos de origen cruzado).
access-control-allow-origin: *
access-control-allow-credentials: true
Después de eso debería funcionar.
Actualizar
No probé esta parte a fondo, pero debería funcionar.
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials: "true"
</IfModule>
¡Buena suerte!
Sé que esto no responderá exactamente a su pregunta, pero escribo esto para las personas que llegan a esta página y tienen el mismo problema donde
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials: "true"
</IfModule>
o
editor.getSession().setUseWorker(false);
no trabajes
Tuve el mismo problema en Chrome. Probé mi sitio en Firefox y Opera y funcionó como se esperaba. Seguí recibiendo Uncaught RangeError: Maximum call stack size exceeded errores al cargar la página.
La solución fue vaciar el caché de Chrome y funcionó de nuevo. Incluso un control/command + shift + r o control + F5 no funcionaría. Literalmente tuve que entrar en la configuración y vaciar el caché.
Nuevamente, sé que esto solo es parcialmente relevante, ¡pero esto es para otros que llegan a esta página!