Official TinyMCE Vue component

About

Official Vue component for TinyMCE, the rich text editor. It wraps TinyMCE as a Vue <Editor /> component. By default, it pulls TinyMCE from the Tiny Cloud CDN unless configured to use a different setup, such as self-hosting the tinymce NPM package.

Quickstart

Cloud CDN

1. Sign up for a Tiny Cloud account to receive a Tiny Cloud API key.
2. Then in your Vue project:

   1. Run npm install @tinymce/tinymce-vue

   2. Include the following code:

      <template>
        <h1>TinyMCE Vue demo</h1>
        <Editor
          api-key="your-api-key"
          v-model="content"
          :init="{ plugins: 'lists link image table code help wordcount' }"
        />
      </template>
      
      <script setup>
      import { ref } from 'vue';
      import Editor from '@tinymce/tinymce-vue';
      
      const content = ref('<p>Initial value</p>');
      </script>

   3. Update the api-key prop on the Editor component to include your Tiny Cloud API key.

For more information: Using TinyMCE with Vue - Cloud CDN

Self hosted via NPM package

Using TinyMCE from NPM in a Vue project requires a couple of extra steps. See the documentation for more information: Using TinyMCE with Vue - Self hosted via NPM

Demos

For our quick demos, check out the TinyMCE Vue Storybook.

Detailed documentation

• TinyMCE Vue Technical Reference.
• TinyMCE Documentation.

Vue Version Compatibility

vue	tinymce-vue
3.x	4.0 and above
2.x	Versions prior to 4.0

Issues

Have you found an issue with tinymce-vue or do you have a feature request? Open up an issue and let us know or submit a pull request. Note: for issues related to TinyMCE please visit the TinyMCE repository.

License

tinymce-vue is licensed under the MIT License. See the LICENSE.txt file for details.

Depending on use case, the TinyMCE core editor can be used under either GPL-2.0-or-later or a commercial license. See the tinymce package for details.