I have installed Tinymce on my nuxt js project using npm i tinymce
and it installed v6
i then did the following in the nuxt.config.js file
plugins: [
'~/plugins/axios',
{
src: "~/plugins/tinymce.js",
mode: "client",
ssr: false
}
]
I created a tinymce.js file inside the plugins folder and i have all this inside it
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 tinymce
i then did this inside my .vue file
<textarea
v-model="body"
id="main"
type="text"
rows="4"
>
</textarea>
Script
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'
})
}
But the data does not send to the database so i keep getting validation error on the body.
- How can i solve this
- Anytime i navigate away from the page in which tinymce is to another page on the browser i need to refresh the browser to see the tinymce editor when i go back to the page where it is. (How can i solve this)?
CodePudding user response:
The answer here is solving the exact same issue, even with the v-model
apparently.
Query selectors should not be used but rather refs
are recommended!