0

i'm trying to get an editor but i keep getting

Cannot find module '@tinymce/tinymce-vue'

this is my html and script component in which i want to display the editor

<template>
   <div id="app">

     <editor
       api-key="no-api-key"
       :init="{
         height: 500,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         ],
         toolbar:
           'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
       }"
     />
   </div>
 </template>

 <script>
 import Editor from '@tinymce/tinymce-vue'

 export default {
   name: 'app',
   components: {
     'editor': Editor
   }
 }
 </script>

after installing tinymce i get the error shown below

 ✖ Nuxt Fatal Error                                                                       │
   │                                                                                            │
   │   Error:                                                                                   │
   │                                                                                            │
   │   Vue packages version mismatch:                                                           │
   │                                                                                            │
   │   - vue@3.2.40                                                                             │
   │   - vue-server-renderer@2.6.14                                                                This may cause things to work incorrectly. Make sure to use the same version for both.

this is my package.json file, as written here tinymce is installed

{
  "name": "admin",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/pwa": "^3.3.5",
    "@tinymce/tinymce-vue": "^5.0.0",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "cloudinary": "^1.28.1",
    "connect-multiparty": "^2.2.0",
    "core-js": "^3.15.1",
    "nedb": "^1.8.0",
    "nuxt": "^2.15.7",
    "pusher": "^5.0.1"
  },
}

please how can i go about this

jibzy
  • 539
  • 2
  • 11
  • Looks like your snippet is matching my [answer here](https://stackoverflow.com/a/71594866/8816585). I guess that we are missing the install of the package itself. Do you have it in your `package.json`? – kissu Sep 30 '22 at 07:20
  • If it's not possible, you can try to run `npm i @tinymce/tinymce-vue` or `yarn add @tinymce/tinymce-vue` should be enough. – kissu Sep 30 '22 at 07:24
  • yes its your answer i'm following after installation i'm getting ...... Vue packages version mismatch: – jibzy Sep 30 '22 at 08:52
  • Please edit your question with this and also share your `package.json`, comments are not a good place for that. – kissu Sep 30 '22 at 08:54
  • Strange `package.json` you have here, there is no `nuxt` in it and it's just those packages you're using? The project is not really well presented on [its changelog](https://github.com/tinymce/tinymce-vue/blob/HEAD/CHANGELOG.md) but I suspect that the package had a breaking change towards a Vue3 support. Try to downgrade and use the v4 or even v3. – kissu Sep 30 '22 at 09:23
  • lol, that Nuxt single line edit. Feel free to post all of your package.json, it's nothing sensitive. – kissu Sep 30 '22 at 09:56
  • @kissu updated using nuxt version 2 – jibzy Sep 30 '22 at 13:45
  • What about my other comment? – kissu Sep 30 '22 at 15:34
  • @kissu please I'm now using nuxt 3 with tinymce ,your code works but I'm just getting plain text area with no editors – jibzy Oct 06 '22 at 09:19

0 Answers0