How to Use TinyMCE with NuxtJS

Question

I am trying to build a blogging platform and i need to use a text editor and i have considered CKeditor and TinyMCE but there is no video or good instruction on how to use it with NuxtJS.

If anyone can help me it will be appreciated.

Answer 1

Please do not use a CDN but rather the solution that is here.

With something like this

<template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <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>

Answer 2

Tinymce and CKeditor both have NPM packages and CDNs. This means you have two ways of using them in a Nuxt app.

Including the package via script tag (CDN)

As stated in the "Getting started" guide of those packages, you can simply import them using a script tag. In Nuxt, you can do this by adding it to your nuxt.config.js head option.

// nuxt.config.js

[...]
head: {
  scripts: [
    { src: "https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js", referrerpolicy: true }
  ]
},
[...]

// example.vue

[...]
mounted() {
  tinymce.init()
}
[...]

Using this solution you have to pay attention that tinymce is only accessed on the client-side, as it will not be available on the server-side.

Adding the package as a plugin

This is usually preferable, as it helps with bundle size analysis and allows your package manager to manage the text editors version.

You can also add the respective package as a plugin. Install the package using npm or yarn.

npm i tinymce

Afterward, simply create a .js-file in the plugins directory like so:

// plugins/tinymce.js

import tinymce from "tinymce"

export default tinymce

Register the plugin in your nuxt.config.js

// nuxt.config.js

plugins: [
  {
    src: "~/plugins/tinymce.js",
    mode: "client", // This way the plugin will only be initiated on the client side
  }
]

Now you can use the plugin within your app, accessing tinymce, just like in example.vue above.

Dynamically import the package within individual components

Another option is importing the npm package in the component directly. This may improve performance as the package is only imported when it is needed. If the package supports SSR, you can simply import it like you would any other package at the top of the script tag.

If your package does not support SSR (like most text editors), you can import it dynamically after checking whether the process is running on the client-side or by only importing it within hooks or methods that run on the client-side exclusively. (Solution by @kissu)

See this question for dynamic imports: How to make a dynamic import in Nuxt?