Documentation v1.0.1

Preview

Overview

TinyMCE is one of the world's most advanced rich text editor. The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case. For more info see the official site and the Github repository.

Basic Example

Here's how a basic TinyMCE editor will look like.
<template>
  <Editor
      apiKey="ktu1mpe12zfnohqoq3fm63rfq917q3euky0e3x7ch15q7ql1"
      initialValue="<p>Initial editor content</p>"
      :init="{
              height: 500,
              menubar: false,
              plugins: [
                `advlist autolink lists link image charmap`,
                `searchreplace visualblocks code fullscreen`,
                `print preview anchor insertdatetime media`,
                `paste code help wordcount table`,
              ],
              toolbar:
                `undo redo | formatselect | bold italic | \
        alignleft aligncenter alignright | \
        bullist numlist outdent indent | help`,
            }"
  />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Editor from "@tinymce/tinymce-vue";

export default defineComponent({
  name: "editors-tinymce",
  components: {
    Editor,
  },
});
</script>
Preview Get Help Buy Now