Instalé Tinymce en mi proyecto nuxt js usando npm i tinymce e instalé v6 , luego hice lo siguiente en el archivo nuxt.config.js
plugins: [ '~/plugins/axios', { src: "~/plugins/tinymce.js", mode: "client", ssr: false } ]Creé un archivo tinymce.js dentro de la carpeta de complementos y tengo todo esto dentro
import tinymce from "tinymce" import "tinymce/themes/silver" import "tinymce/plugins/table" import "tinymce/plugins/link" import "tinymce/plugins/image" import "tinymce/plugins/lists" import "tinymce/plugins/code" import "tinymce/plugins/fullscreen" import "tinymce/icons/default" import 'tinymce/models/dom' import "tinymce/skins/ui/oxide/skin.min.css" import "tinymce/skins/ui/oxide/content.min.css" import "tinymce/skins/content/default/content.css" import "tinymce/skins/ui/oxide/skin.min.css" import "tinymce/skins/ui/oxide/content.min.css" import "tinymce/skins/content/default/content.css" import "tinymce/skins/ui/oxide/skin.min.css" import "tinymce/skins/ui/oxide/content.min.css" import "tinymce/skins/content/default/content.css" import "tinymce/skins/ui/oxide/skin.min.css" import "tinymce/skins/ui/oxide/content.min.css" export default tinymceluego hice esto dentro de mi archivo .vue
<textarea v-model="body" id="main" type="text" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" rows="4" > </textarea>Guion
data:() =>({ errors: [], title: '', body: '', excerpt: '' }), mounted(){ tinymce.init({ selector: 'textarea#main', height: 500, skin: false, content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }', plugins: 'image code', images_file_types: 'jpg,png,jpeg' }) }Pero los datos no se envían a la base de datos, así que sigo recibiendo un error de validación en el cuerpo.
La respuesta aquí es resolver exactamente el mismo problema, incluso aparentemente con el v-model .
No se deben usar selectores de consultas, ¡sino que se recomiendan refs !