Getting started with TinyMCE in Nuxt: A step-by-step guide

Question

Getting started with TinyMCE in Nuxt: A step-by-step guide

I need to incorporate this script into my Nuxt code:

<script>
  tinymce.init({
    selector: "#mytextarea",
    plugins: "emoticons",
    toolbar: "emoticons",
    toolbar_location: "bottom",
    menubar: false
  });
</script>

I can simply place it within my component's template body (This script must be inside <body> rather than <head>) like so:

https://i.stack.imgur.com/3a4xS.png

and surprisingly, it functions. However, there are two issues:

It appears unattractive
It lacks dynamism. For instance, I cannot dynamically bind selector to a prop or data property! It has to be hardcoded.

Therefore, I am seeking advice on how to properly integrate such scripts into my Nuxt project.

javascript vue.js tinymce nuxt.js script-tag

Answer 1

Answer №1

I highly question the effectiveness of this method. Vue consistently disregards any <script> tags in templates and displays an error message:

Templates should solely focus on mapping the state to the UI. Avoid including tags with side effects in your templates, such as <script>, as they will not be interpreted.

There is no necessity to include this in the template. It is simply normal JS code that can be executed as part of the component lifecycle. Below is a very basic component wrapper that integrates TinyMCE into a Vue app.

However, I do not recommend doing this manually and suggest utilizing the official Vue wrapper (docs) - utilize v3 for Vue 2. The official integration manages all edge cases like component activation/deactivation (when used with <keep-alive>) and proper cleanup when the component is destroyed to prevent memory leaks

const ed = Vue.component("MyEditor", {
  props: ["id", "value"],
  template: `
    <div>
      <textarea :id="id" :value="value"></textarea>
    </div>
  `,
  mounted() {
    const me = this;
    window.tinymce.init({
      selector: "#" + this.id,
      plugins: "emoticons",
      toolbar: "emoticons",
      toolbar_location: "bottom",
      menubar: false,
      setup: function (editor) {
        editor.on("change input undo redo", function () {
          me.$emit('input', editor.getContent({format: 'text'}))
        });
      }
    });
  }
});

Demo

Nuxt

As TinyMCE is completely JS rendered, it is not logical to execute it during server-side rendering. In fact, the above code will not operate on the server at all since there is no window variable. Use Nuxt's <client-only> component to exclusively render the editor on the client side...

UPDATE: On the contrary, the mounted lifecycle hook is not triggered during SSR so perhaps this method will function adequately even without the use of <client-only>

Answer 2

I highly question the effectiveness of this method. Vue consistently disregards any <script> tags in templates and displays an error message:

Templates should solely focus on mapping the state to the UI. Avoid including tags with side effects in your templates, such as <script>, as they will not be interpreted.

There is no necessity to include this in the template. It is simply normal JS code that can be executed as part of the component lifecycle. Below is a very basic component wrapper that integrates TinyMCE into a Vue app.

However, I do not recommend doing this manually and suggest utilizing the official Vue wrapper (docs) - utilize v3 for Vue 2. The official integration manages all edge cases like component activation/deactivation (when used with <keep-alive>) and proper cleanup when the component is destroyed to prevent memory leaks

const ed = Vue.component("MyEditor", {
  props: ["id", "value"],
  template: `
    <div>
      <textarea :id="id" :value="value"></textarea>
    </div>
  `,
  mounted() {
    const me = this;
    window.tinymce.init({
      selector: "#" + this.id,
      plugins: "emoticons",
      toolbar: "emoticons",
      toolbar_location: "bottom",
      menubar: false,
      setup: function (editor) {
        editor.on("change input undo redo", function () {
          me.$emit('input', editor.getContent({format: 'text'}))
        });
      }
    });
  }
});

Demo

Nuxt

As TinyMCE is completely JS rendered, it is not logical to execute it during server-side rendering. In fact, the above code will not operate on the server at all since there is no window variable. Use Nuxt's <client-only> component to exclusively render the editor on the client side...

UPDATE: On the contrary, the mounted lifecycle hook is not triggered during SSR so perhaps this method will function adequately even without the use of <client-only>

Answer 3

Answer №2

In the response that was approved, it was suggested to rely on the official vue package. However, even with the official package, I encountered several issues when integrating it into Nuxt.

Below is a detailed guide on how I successfully got it to work using the following versions:

    "tinymce": "^5.10.3",
    "@tinymce/tinymce-vue": "^3.2.8",
    "vue": "^2.6.11",
    "nuxt": "2.15.8",

The tinymce-vue package requires the availability of tinymce. You can either install it via npm as shown above, or opt for the cloud-hosted version (refer to Prerequisites here).

Challenges Specific to Nuxt

Ensure that the component is enclosed within the <client-only> tag to prevent SSR errors.

If you are self-hosting the tinymce package, make sure to import it only on the client-side to avoid errors like the following:

[Vue warn]: Failed to resolve async component: ... Reason: ReferenceError: navigator is not defined

You can accomplish this by utilizing require and wrapping them around if (process.client) {.

Example:

if (process.client) {
  require('tinymce/tinymce')
  require('tinymce/themes/silver')
  require('tinymce/icons/default')
  require('tinymce/plugins/lists') // repeat for any editor plugins used
}

import Editor from '@tinymce/tinymce-vue'

At this stage, the editor should load on your page, but the styles may not load properly.

To address this issue, add

require('tinymce/skins/ui/oxide/skin.min.css')

after the other requires.

Although the styles are now fixed, the tinymce theme may still attempt to fetch additional CSS files like mobile and min versions independently, leading to network errors.

Example:

404 http://localhost:3000/_nuxt/skins/ui/oxide/content.min.css
404 http://localhost:3000/_nuxt/skins/ui/oxide/skin.min.css

For content: You can either duplicate the file in the static folder with the same path or customize using the content_css setting (within the Vue component init options).

For skin: Considering it was already provided as a module, set skin: false in the Vue component init settings.

UPDATED 2022-11-29: Typo Correction

Answer 4

In the response that was approved, it was suggested to rely on the official vue package. However, even with the official package, I encountered several issues when integrating it into Nuxt.

Below is a detailed guide on how I successfully got it to work using the following versions:

    "tinymce": "^5.10.3",
    "@tinymce/tinymce-vue": "^3.2.8",
    "vue": "^2.6.11",
    "nuxt": "2.15.8",

The tinymce-vue package requires the availability of tinymce. You can either install it via npm as shown above, or opt for the cloud-hosted version (refer to Prerequisites here).

Challenges Specific to Nuxt

Ensure that the component is enclosed within the <client-only> tag to prevent SSR errors.

If you are self-hosting the tinymce package, make sure to import it only on the client-side to avoid errors like the following:

[Vue warn]: Failed to resolve async component: ... Reason: ReferenceError: navigator is not defined

You can accomplish this by utilizing require and wrapping them around if (process.client) {.

Example:

if (process.client) {
  require('tinymce/tinymce')
  require('tinymce/themes/silver')
  require('tinymce/icons/default')
  require('tinymce/plugins/lists') // repeat for any editor plugins used
}

import Editor from '@tinymce/tinymce-vue'

At this stage, the editor should load on your page, but the styles may not load properly.

To address this issue, add

require('tinymce/skins/ui/oxide/skin.min.css')

after the other requires.

Although the styles are now fixed, the tinymce theme may still attempt to fetch additional CSS files like mobile and min versions independently, leading to network errors.

Example:

404 http://localhost:3000/_nuxt/skins/ui/oxide/content.min.css
404 http://localhost:3000/_nuxt/skins/ui/oxide/skin.min.css

For content: You can either duplicate the file in the static folder with the same path or customize using the content_css setting (within the Vue component init options).

For skin: Considering it was already provided as a module, set skin: false in the Vue component init settings.

UPDATED 2022-11-29: Typo Correction

Getting started with TinyMCE in Nuxt: A step-by-step guide

Answer №1

Nuxt

Answer №2

Challenges Specific to Nuxt

Similar questions

When working with Function components in NextJS, it's important to note that they cannot be assigned refs directly. If you're trying to access a ref within a Function component, you

Display a pop-up upon clicking a button

Tips for using a JavaScript variable in a PHP file on WordPress

Embed images within the JavaScript bundle

What is the best way to separate one dropdown area from another dropdown area?

Unable to install react-dom/test-utils using npm

Trouble uploading an audio blob as a base64 string using Google Drive API with the drive.files.create method - File ID could not be located

Error: Unable to access the 'questionText' property as it is undefined

The Mongoose query for the id field retrieves both the id and _id values

The issue of undefined database columns arises when attempting to transmit data from an HTML form to a MySQL database via Express

Adjusting the selected state of an HTML/CSS checkbox with JavaScript

Python code allowing users to navigate back to the previous page while retaining elements

Mapping an array using getServerSideProps in NextJS - the ultimate guide!

Utilize the power of jQuery for form validation by combining the errorPlacement and showErrors functions

Using the inline calendar feature of Bootstrap 3 Datepicker to easily select and capture dates

Retrieving information from a JSON object in Angular using a specific key

Is it possible to customize the width of text color alongside a progress bar?

Replace the typical bootstrap text class with stylish and modern google material icons

Activate Jquery as the user navigates through it with scrolling

What is the most effective method for sorting through vast amounts of data with Javascript, React, and Redux?