0
309
VistasTinyMCE no cargado en el componente vue
Estoy tratando de integrar tinymce en mi aplicación vue. No quiero usar la versión en la nube y la instalé dentro de mi aplicación demandando este elogio npm i tinymce .
Después de la instalación en mi componente, importé los archivos necesarios de esta manera y creé un área de texto en la plantilla
<template> <Navbar></Navbar> <div class="container" id="editorWrapper"> <div class="row mt-5 pt-5 m-0"> <!-- --> <div class="col-sm-12 col-md-12 col-lg-12 p-0" id=""> <h1>Write post</h1> </div> <!-- --> <div class="col-sm-12 col-md-12 col-lg-12 p-0" id="programEditorWrapper"> <textarea ref="programEditor" id="programEditor"></textarea> </div> </div> </div> </template> <script> import tinymce from 'tinymce' import 'tinymce/themes/silver' import 'tinymce/skins/ui/oxide/skin.css' import 'tinymce/plugins/advlist' import 'tinymce/plugins/code' import 'tinymce/plugins/emoticons' import 'tinymce/plugins/emoticons/js/emojis' import 'tinymce/plugins/link' import 'tinymce/plugins/lists' import 'tinymce/plugins/table' import contentUiCss from 'tinymce/skins/ui/oxide/content.css' import contentCss from 'tinymce/skins/content/default/content.css' export default { name: 'ProgramsEditor', components: { Navbar }, data() { return { editor: null } }, created() { }, mounted() { this.initEditor() }, methods: { initEditor() { this.editor = tinymce.init({ selector: '#programEditor', plugins: 'advlist code emoticons link lists table', toolbar: 'bold italic | bullist numlist | link emoticons', skin: false, content_css: false, content_style: contentUiCss.toString() + '\n' + contentCss.toString() }) }, } } </script> Desafortunadamente, no puedo ver el editor y recibo dos errores. 
¿Cómo puedo solucionar este problema y dejar que el editor funcione?
2 Respuestas
Responde la pregunta0
Según el mensaje de error y el fragmento de código proporcionado, no importó algunos archivos críticos que utiliza TinyMCE, por lo que intenta cargar los archivos JS externos que no parecen existir o se sirven como archivos HTML (potencialmente un 404 página).
Sugeriría revisar más los documentos de agrupación de TinyMCE, que contienen la respuesta aquí: https://www.tiny.cloud/docs/tinymce/6/introduction-to-bundling-tinymce/ . Entonces, en este caso, para resolver los 2 errores que recibe que deberían poder resolverse importando el modelo y el paquete de íconos predeterminado junto con el tema:
import tinymce from 'tinymce' import 'tinymce/icons/default'; import 'tinymce/themes/silver'; import 'tinymce/models/dom';Básicamente, TinyMCE necesita como mínimo el núcleo, el tema, la máscara, el paquete de íconos predeterminado y el modelo para poder operar (Nota: el modelo es nuevo en TinyMCE 6 y no se necesitaba antes). Si se pierde alguno de ellos, no se podrá inicializar.
0
Además, puede usar la guía oficial de integración de Vue .
Después de la instalación.
Ingrese simplemente los paquetes principales:
Necesita tener instalados el paquete básico tinymce y tinymce-vue.
import "tinymce/tinymce"; import "tinymce/themes/silver"; import "tinymce/icons/default"; import "tinymce/skins/ui/oxide/skin.css"; import <Your component name here> from "@tinymce/tinymce-vue";Y utilícelo como un componente normal de Vue.