es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Angular, TinyMCE 5 GET http://localhost:4200/tinymce/themes/silver/theme.min.js net::ERR_ABORTED 404 (No encontrado) error.

Angular, TinyMCE 5 GET http://localhost:4200/tinymce/themes/silver/theme.min.js net::ERR_ABORTED 404 (No encontrado) error.

01 Aug, 2023 Programación

Estoy integrando TinyMCE en mi proyecto de Angular 13 y funcionaba bien hasta que empezó a aparecer este error:

Aquí hay una imagen del error en la consola.
enter image description here

enter image description here
Soy nuevo en Angular pero por lo que entiendo, Angular no puede encontrar los archivos para el tema.

Aquí está la parte relevante del archivo angular.json:

"assets": [ 
    "src/favicon.ico",
    "src/assets"
],
"styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.css"
],
"scripts": [
    "node_modules/tinymce/tinymce.min.js"
]

Aquí está la inicialización para el editor:

init={
    base_url: '/tinymce', // Root for resources
    suffix: '.min' ,       // Suffix to use when loading resources
    height: 300,
    plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
    ],
    menubar: false,
    toolbar: 'undo redo | formatselect | fontselect | fontsizeselect |'+
    '| bold italic backcolor | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist outdent indent |'+
    'removeformat | link image media |',
    font_formats: 'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace',
};

Versión de TinyMCE:

"@tinymce/tinymce-angular": "^4.2.4",
"rxjs": "~7.4.0",
"tinymce": "^5.10.2",

He intentado solucionar este problema durante las últimas 2 horas utilizando varios blogs y no puedo encontrar el problema. Si alguien puede señalar el problema o ayudar de alguna manera…

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Problema al integrar TinyMCE en un proyecto Angular 13

    Problema

    Ha aparecido un error en la consola al integrar TinyMCE en un proyecto Angular 13. Parece que Angular no puede encontrar los archivos del tema.

    Solución

    Al analizar la parte relevante del archivo angular.json, parece que la matriz de scripts hace referencia a la ruta correcta para el archivo tinymce.min.js. Sin embargo, no se menciona la ruta de los archivos del tema.

    Para solucionarlo, agregue una ruta a los archivos del tema en la matriz de assets del archivo angular.json. Por ejemplo:

    "assets": [
    "src/favicon.ico",
    "src/assets",
    {
        "glob": "**/*",
        "input": "./node_modules/tinymce/skins/",
        "output": "/assets/skins/"
    }
]

    Esto le indicará a Angular que incluya todos los archivos en la carpeta ./node_modules/tinymce/skins/ en la carpeta de assets del proyecto generado.

    Luego, cambie la opción de inicialización base_url del editor TinyMCE a:

    init={
  base_url: '/assets/skins/ui/oxide', // Cambie a la ruta correcta para la carpeta de skins
  suffix: '.min',
  ...
}

    Esto debería solucionar el problema y permitir que Angular encuentre los archivos necesarios para el tema.

Comments are closed.