Estoy tratando de incorporar el módulo PasteFromWord en mi aplicación web. Descargué los dos archivos y los solté en mi aplicación. La tecnología de mi aplicación web realmente no importa, pero como referencia es Java + Tomcat 8.5 + JSF 2.3 + Primefaces 8.0 + p:textEditor (que usa Quill debajo). El marco ya ha incluido jQuery.
PasteFromWord.js ligeramente del original para import tools from './tools.js' en lugar de './tools' para solucionar una queja del navegador y agregué una declaración de console.log . Así es como se ve PasteFromWord.js :
import tools from './tools.js' console.log("Initializing PasteFromWord"); class PasteFromWord { constructor(config) { this.config = config || {} } ... rest of class definition omitted ... } export default PasteFromWordPuse esto en el encabezado HTML generado para cargar el módulo:
<script type="module"> import PasteFromWord from '../PasteFromWord.js'; console.log("imported PasteFromForward=" + PasteFromForward); </script> Tanto el mensaje de registro en PasteFromWord.js como el mensaje de registro en la etiqueta <script> aparecen en la consola, lo que demuestra que está cargando el script y que la función está definida.
Más abajo en la salida HTML, tengo este código para usarlo:
<script type="javascript"> $(window).ready(function() { console.log("about to create PasteFromWord"); var paster = new PasteFromWord(); // more code will go here in the future }); </script>El mensaje de registro se imprime y, en la siguiente línea, en la consola del navegador aparece el siguiente error (idéntico en Firefox y Chrome):
Uncaught ReferenceError: PasteFromWord is not defined He buscado mucho las causas de ReferenceError , pero ninguna de las soluciones se aplica. Creo que tengo todas las bases cubiertas, pero obviamente falta algo. ¿Hay algo mal con el alcance? ¿Modo estricto? ¿Algo más?
Esta respuesta (inspirada en una respuesta a una pregunta diferente ) parece funcionar, pero no estoy contento con ella, así que no la estoy marcando como la solución. Con suerte, hay una mejor respuesta, o alguien que trabaje con JavaScript con más frecuencia que yo pueda decir si es una respuesta adecuada.
El problema parece ser de alcance, donde PasteFromWord está disponible dentro de la etiqueta <script> inicial que importa el módulo, pero no después. Entonces, la respuesta es asignar la definición de clase para que sea miembro de un objeto que se conoce en otros ámbitos.
<script type="module"> import PasteFromWord from '../PasteFromWord.js'; window.PasteFromWord = PasteFromWord; console.log("imported PasteFromForward=" + PasteFromForward); </script> Luego, la clase se puede instanciar anteponiendo window. al nombre de la clase:
<script type="text/javascript"> $(window).ready(function() { var paster = new window.PasteFromWord(); // more code will go here in the future }); </script>