Skip to main content

Vue Installation

@editor42/editor42-vue is a thin wrapper around Editor42 that makes it a Vue 3 component. There is no account, no sign-up and no key of any kind.

Install​

npm install @editor42/editor42-vue

or for Yarn users:

yarn add @editor42/editor42-vue

Vue 3 is supported; Vue 2 is not.

Basic Setup​

<script setup>
import Editor from '@editor42/editor42-vue';
</script>

<template>
  <Editor :init="{ height: 400 }" initial-value="<p>Hello from Editor42</p>" />
</template>

With no extra props the editor script is loaded from https://cdn.editor42.com on the latest channel. That pointer only ever moves for security and bug-fix releases, because the Editor42 major version is fixed forever.

Reading and Writing the Content​

The component supports v-model:

<script setup>
import { ref } from 'vue';
import Editor from '@editor42/editor42-vue';

const content = ref('<p>Hello from Editor42</p>');
</script>

<template>
  <Editor v-model="content" :init="{ height: 400, plugins: 'lists link' }" />
</template>

Use initial-value instead when you only need a starting point and will read the content later.

Self-Hosting​

Point the component at your own copy of the script, using the full file URL:

<Editor editor42-script-src="/js/editor42/editor42.min.js" />

Pinning a Version​

<Editor channel="42.0.0" />

channel accepts latest, a latest-N alias, or an exact version.

Editor Options​

Everything else is an Editor42 option, passed through init:

<Editor :init="{ height: 400, menubar: false, plugins: 'lists link' }" />

See the Configuration Options for the full list.

Migrating from @tinymce/tinymce-vue​

npm uninstall @tinymce/tinymce-vue
npm install @editor42/editor42-vue

Change the import to @editor42/editor42-vue and you are done. Prop and event names are unchanged, and the old tinymce-script-src and cloud-channel props keep working as deprecated aliases of editor42-script-src and channel.

All API-key and licence-key handling has been removed. The corresponding props are still accepted so existing code compiles, but they do nothing: no key is read, stored or sent anywhere, and no request ever reaches a vendor cloud.

The component also drives a stock TinyMCE if that is what is already loaded on the page, which keeps the switch reversible.

See the migration guide for the editor side of the move.

Live Demo​

See it running, with its full source: the Vue demo.