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>
2024©
Keenthemes
