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.
- Run the following command to install it:
npm install -g @vue/cli
- Create a Vue.js project named vue-tiny-mce by running the following command in the terminal.
vue create vue-tiny-mce
- 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
- After the project has been created, run the following command to start the development server.
cd vue-tiny-mce npm run serve
- Head over to http://localhost:8080/ in your browser. Here is how your app will look:
- Run the following command to install the Tiptap package:
npm install @tiptap/vue-3 @tiptap/starter-kit
- 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>
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:
- Uninstall the Tiptap package from your Vue.js project:
npm uninstall @tiptap/vue-3
- If you are using Vue 2, run this command to uninstall:
npm uninstall @tiptap/vue-2
You might also need to run the following command to remove the
tiptap-starter-kit
:npm uninstall @tiptap/starter-kit
-
Modify the Tiptap component or the
App.vue
file like this:<template></template> <script> export default { name: "App", components: {}, }; </script> <style> </style>
- Run the following command in your project’s root directory to start the development server:
npm run serve
-
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"
- 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:
- Navigate to the TinyMCE registration page in the browser and create a free tiny.cloud account.
- TinyMCE signup image
- When prompted, enter your details and click the Continue to Setup button.
- Continue to setup image
- On your tiny.cloud dashboard, copy the Tiny API key.
Integrating TinyMCE with Vue.js app
To integrate TinyMCE with Vue.js:
-
Now you’ll integrate TinyMCE with Vue.js. First update your
App.vue
file by replacing the value in theapi-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>
-
Import the
Editor
component from thetinymce-vue
package inside thescript
tags:import Editor from "@tinymce/tinymce-vue"; export default { name: "App", components: { editor: Editor, }, };
-
Export the
Editor
component to the app:<editor api-key="8wphbjzfrlwugpe3ibkx678fsntv1nhp05ze8jokrqspn4l9io" />;
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.
-
Update the TinyMCE
Editor
code to adjust theheight
of the editor on the app:<editor api-key="8wphbjzfrlwugpe3ibkx678fsntv1nhp05ze8jokrqspn4l9io" :init="{ height: 500, }" />
-
To remove the
Menu Bar
, set themenubar
field tofalse
by using the following code:<editor api-key="8wphbjzfrlwugpe3ibkx2dsntv1nhp05ze8jokrqspn4l9io" :init="{ height: 500, menubar: false, }" />
-
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 '], }" />
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.