Migrating from Tiptap to TinyMCE: the Vue.js configuration

There are a variety of rich text editors (RTEs) that even non-technical content creators can use to create their websites. However, selecting the right one relies on really knowing both your project well and the customer's needs. But, if you do make an error in your selection, don’t fear the consequences – fortunately, you can switch from one RTE to another, even while working on a project.

This article shows how to switch from Tiptap to TinyMCE within your Vue.js project.

The entire code for this tutorial at this GitHub repo, and the full deployed version is on a dedicate Vue app.

What is a rich text editor?

Every web page user experiences a RTE. They’re an interface that enables you to edit rich text – meaning text with full style formatting including bold, italic, underline, and different font choices. You can embed multimedia files like images, videos, and audio. More advanced editors are considered What You See Is What You Get, pronounced “wiz-ee-wig” (WYSIWYG). WYSIWYG editors preview how the page will look when it’s live in a web browser.

What Is TinyMCE?

TinyMCE is a popular WYSIWYG HTML editor designed to work with all types of websites and products. It integrates with frameworks and languages like React, Vue.js, and Svelte, and is available as a self-hosted package you can integrate into your website, or a Cloud version accessed through a CDN.

Why transition to TinyMCE?

There are plenty of WYSIWYG HTML editors available, but our TinyMCE Vue WYSIWYG editor offers multiple advantages:

• The available open-source plugins include additional features such as an LGPL, automatic hyperlinks, autoresizing, color picking, and CSS imports.
• Our enterprise tiers offer access to an on-demand support team.
• Customers have shared that TinyMCE saves them time and money.

What’s Tiptap, and how does it work with Vue?

Tiptap is a framework-agnostic, headless wrapper around ProseMirror that allows you to build and customize your own RTE. GitLab, Nextcloud, and Apostrophe CMS (among others), make use of Tiptap to build their own RTE.

Vue.js is a progressive, open-source framework designed to build web interfaces as well as single-page apps for desktop and mobile. It works well with a variety of tooling (including Tiptap), but TinyMCE specifically offers a component for integrating with Vue.js.

Getting started with Vue

If you don’t have an existing Vue.js project, you can create one. This tutorial uses the Vue CLI.

1. Run the following command to install it:
   

   npm install -g @vue/cli

   COPY
2. Create a Vue.js project named vue-tiny-mce by running the following command in the terminal.
   

   vue create vue-tiny-mce

   COPY
3. When prompted, choose the Default (Vue 3) ([Vue 3] babel, eslint) preset.
   

   Vue CLI v4.5.15
   ? Please pick a preset:
   Default ([Vue 2] babel, eslint)
   > Default (Vue 3) ([Vue 3] babel, eslint)
   Manually select features

   COPY
4. After the project has been created, run the following command to start the development server.
   

   cd vue-tiny-mce
   npm run serve

   COPY
5. Head over to http://localhost:8080/ in your browser. Here is how your app will look:
   
   
   
   
   
6. Run the following command to install the Tiptap package:
   

   npm install @tiptap/vue-3 @tiptap/starter-kit

   COPY
7. Edit the App.vue file to add the Tiptap editor using the composition API and the useEditor method from Tiptap.
   

   <template>
     <h1>Tiptap Editor with VueJS</h1>
   
     <div id="editor">
   	<editor-content :editor="editor" />
     </div>
   </template>
   
   <script>
   import { useEditor, EditorContent } from "@tiptap/vue-3";
   import StarterKit from "@tiptap/starter-kit";
   
   export default {
     name: "App",
     components: {
   	EditorContent,
     },
   
     setup() {
   	const editor = useEditor({
     	content: "<h2>Hello World!</h1>",
     	extensions: [StarterKit],
   	});
   
   	return { editor };
     },
   };
   </script>
   
   <style scoped>
   #editor {
     border: 1px solid salmon;
   }
   p {
     margin: 1em 0;
   }
   </style>

   COPY

Here is how your app will look:

Migrating from Tiptap to TinyMCE

Now to make the switch from Tiptap to TinyMCE in your new Vue.js project, run the following commands:

1. Uninstall the Tiptap package from your Vue.js project:
   

   npm uninstall @tiptap/vue-3

   COPY
2. If you are using Vue 2, run this command to uninstall:
   

   npm uninstall @tiptap/vue-2

   COPY

   You might also need to run the following command to remove the tiptap-starter-kit:

   npm uninstall @tiptap/starter-kit

   COPY

3. Modify the Tiptap component or the App.vue file like this:

   <template></template>
   
   <script>
   export default {
     name: "App",
     components: {},
   };
   </script>
   
   <style>
   </style>

   COPY
4. Run the following command in your project’s root directory to start the development server:
   

   npm run serve

   COPY

5. Head to http://localhost:8080/ in your browser; you will see a blank screen since the App.vue file doesn’t have any components.

   Next install the tinymce-vue package. Run the following command in your project’s root directory:

   npm install --save "@tinymce/tinymce-vue@^4"

   COPY
6. You will need a TinyMCE API key to deploy the TinyMCE editor in your app. Here’s how to sign up for a FREE API key:
   
   
7. Navigate to the TinyMCE registration page in the browser and create a free tiny.cloud account.
   
   
8. TinyMCE signup image
   
   
9. When prompted, enter your details and click the Continue to Setup button.
   
   
10. Continue to setup image
    
    
11. On your tiny.cloud dashboard, copy the Tiny API key.

Integrating TinyMCE with Vue.js app

To integrate TinyMCE with Vue.js: 

1. Now you’ll integrate TinyMCE with Vue.js. First update your App.vue file by replacing the value in the api-key field with your API key:

   <template>
     <h1>Vue TinyMCE Example</h1>
     <editor
   	api-key="8wphbjzfrlwugpe3ibkx678fsntv1nhp05ze8jokrqspn4l9io"
     />
   </template>
   
   <script>
   import Editor from "@tinymce/tinymce-vue";
   
   export default {
     name: "App",
     components: {
   	editor: Editor,
     },
   };
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>

   COPY

2. Import the Editor component from the tinymce-vue package inside the script tags:

   import Editor from "@tinymce/tinymce-vue";
   
   export default {
     name: "App",
     components: {
       editor: Editor,
     },
   };
   

   COPY

3. Export the Editor component to the app:

   <editor api-key="8wphbjzfrlwugpe3ibkx678fsntv1nhp05ze8jokrqspn4l9io" />;
   

   COPY

   Make sure to update the api-key field in the above code with your own API key.

Configuring TinyMCE editor

Next you’ll customize and configure TinyMCE by adjusting the height, adding plugins, and other actions.

1. Update the TinyMCE Editor code to adjust the height of the editor on the app:

   <editor
   	api-key="8wphbjzfrlwugpe3ibkx678fsntv1nhp05ze8jokrqspn4l9io"
   	:init="{
     	height: 500,
   	}"
     />

   COPY

2. To remove the Menu Bar, set the menubar field to false by using the following code:

   <editor
   	api-key="8wphbjzfrlwugpe3ibkx2dsntv1nhp05ze8jokrqspn4l9io"
   	:init="{
     	height: 500,
     	menubar: false,
   	}"
     />

   COPY

3. Add different plugins to customize your app even further. For example, to add image support to the editor, update the code like this:

   <editor
   	api-key="8wphbjzfrlwugpe3ibkx678fsntv1nhp05ze8jokrqspn4l9io"
   	:init="{
     	height: 500,
     	menubar: false,
     	plugins: ['image '],
   	}"
     />

   COPY

Your app should now look like this:

TinyMCE offers multiple plugins to choose from so that you can add that extra edge to your editor, including autolink, lists, link, print, and preview. To see the available plugins, check the full list.

Comparing the Tiptap configuration to TinyMCE

Compared to TinyMCE, configuring the same settings in Tiptap can be a hassle, especially if you’re not from a programming background. To add image support, you’ll need separate functions and code to handle the entire process. 

Further, if you want to extend the image support to have resizable images, or floating images, the entire process can be difficult. Here’s an example:

<template>
  <div v-if="editor">
	<button @click="addImage">
  	add image from URL
	</button>
	<editor-content :editor="editor" />
  </div>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Image from '@tiptap/extension-image'
import Dropcursor from '@tiptap/extension-dropcursor'

export default {
  components: {
	EditorContent,
  },

  data() {
	return {
  	editor: null,
	}
  },

  methods: {
	addImage() {
  	const url = window.prompt('URL')

  	if (url) {
    	this.editor.chain().focus().setImage({ src: url }).run()
  	}
	},
  },

  mounted() {
	this.editor = new Editor({
  	extensions: [
    	Document,
    	Paragraph,
    	Text,
    	Image,
    	Dropcursor,
  	],
  	content: "",
	})
  },

  beforeUnmount() {
	this.editor.destroy()
  },
}
</script>

Exporting Your Data to TinyMCE from Tiptap

For your website’s database, you can easily import your data from the Tiptap editor to your TinyMCE editor. There are multiple ways to do this, but it depends on your configurations in Tiptap.

If you’re not using an external database and storing data on your own server that’s event-triggered, here’s how to export the data in JSON or HTML using Tiptap:

const json = editor.getJSON();
const html = editor.getHTML();

You might use events to send your Tiptap content to an external database via the API. In that case, you can easily replicate the configuration by using the TinyMCE Events plugin and sending the content of the editor in the API request to the database.

You can get that content with getContent(). Read more about this method in the TinyMCE documentation.

const editorContent = tinymce.activeEditor.getContent();

You can also specify the format of the content to get with this method. For example:

const editorContent = tinymce.activeEditor.getContent({ format: "text" });

Final thoughts…

A high-quality rich text editor can make all the difference when building and deploying your web projects for content creators. Even non-technical team members can use it to work with and display WYSIWYG text, which simplifies and optimizes your workflow.

TinyMCE is an easy-to-use RTE that integrates with multiple frameworks and languages, giving you access to a variety of useful features even at the open-source, FREE level. (And that’s only one of the options from Tiny, which offers cloud-based solutions for content creation.)

If you’d like to try out the TinyMCE integration with Vue, remember to sign up for a free API key to get started.