Editor42 in a Vue app

When to use

When the editor belongs to a Vue 3 app and its content is just another reactive value in your component.

How it works

The component from @editor42/editor42-vue, bound with v-model: type in the editor and the HTML below follows. A real app writes it as a single-file component; this demo has no build step, so it mounts the same component through createApp. Everything inside :init is a plain Editor42 option.

How to start using

Install the component with npm install @editor42/editor42-vue and use <Editor v-model="content"> in your template. With no extra props it loads the editor from cdn.editor42.com — no account, no key.

See the Vue install page for self-hosting and the move from @tinymce/tinymce-vue.

Download ZIPOpen in CodePlay

Live Demo

JavaScript

import {createApp, ref} from 'vue';
import Editor from '@editor42/editor42-vue';

const INITIAL = `
<h2>Editor42 in a Vue app</h2>
<p>This is the <code>&lt;Editor&gt;</code> component from <code>@editor42/editor42-vue</code>, bound with <code>v-model</code>: type in the editor and the HTML under it follows.</p>
<ul>
  <li><code>v-model</code> for two-way binding</li>
  <li><code>initial-value</code> instead, when you only need a starting point</li>
  <li>Everything inside <code>:init</code> is a plain Editor42 option</li>
</ul>
`;

createApp({
  components: {Editor},

  setup() {
    return {content: ref(INITIAL)};
  },

  data() {
    return {
      init: {
        height: 420,
        menubar: false,
        plugins: 'lists link code',
        toolbar: 'undo redo | bold italic | bullist numlist | link code',
        content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; }'
      }
    };
  },

  template: `
    <Editor v-model="content" :init="init"/>
    <h2 class="h6 mt-3">Your state, live</h2>
    <pre class="state">{{ content.trim() }}</pre>
  `
}).mount('#app');

HTML

<h1>Editor42 in Vue</h1>
<p class="hint">The <code>@editor42/editor42-vue</code> component, bound with <code>v-model</code>.</p>

<div id="app"></div>

SASS

.hint {
  margin-bottom: 20px;
  color: var(--demo-muted-color);
}

.state {
  max-height: 160px;
  overflow: auto;
  padding: 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 13px;
  white-space: pre-wrap;
}