vue3.3-TinyMCE: Basic use of TinyMCE rich text editor

1. TinyMCE official website

TinyMCE Chinese Documentation Chinese Manual

2. Introduction to the official website

TinyMCE is an easy-to-use and powerful WYSIWYG rich text editor. Similar programs include: UEditor, Kindeditor, Simditor, CKEditor, wangEditor, Suneditor, froala, etc.

Advantages of TinyMCE:

Open source and commercially available, based on LGPL2.1

Rich plug-ins, the built-in plug-ins basically cover the functions required for daily use (see Demo-2 below for an example)

Rich interfaces, strong scalability, and the ability to expand functions infinitely

Nice interface, in line with modern aesthetics

Provides three modes: classic, inline, and immersive without distraction (see "Introduction and Getting Started" for details)

Excellent support for standards (since v5)

Multilingual support, dozens of languages can be downloaded from the official website.

3. TinyMCE has three modes

Classic mode: Based on the form, use a field of the form to fill in the content, and the editor is always a part of the form.

Inline mode (inline): The editing view and the reading view are combined into one. When it is clicked, the element will be replaced by the editor instead of the editor being always visible.

Immersion-free mode (distraction-free): The so-called 'immersion mode' feels like TinyMCE forcibly interprets the inline mode as another style. Let's not debunk it either, just pretend we don't know.

Importantly, when using inline mode, TinyMCE does not use an iframe to isolate the edited content from the page. The advantage of this is that the content can inherit the CSS style of the page. The edited content will be completely displayed in accordance with the specified style on the page, thus providing a real "what you see is what you get" editing experience.

4. Vue3.3.4 + ts integrates TinyMCE

To integrate TinyMCE in a Vue 3.3.4 + TypeScript project, you can follow these steps:

4.1. Install TinyMCE

Install the latest version of TinyMCE using npm or yarn:

pnpm add tinymce @tinymce/tinymce-vue

4.2. Use of business pages

<template>
  <div class="container">
    <div class="container-tinymce">
      <Editor ref="tinymceEle" id="tinymceEle" :init="{plugins: 'link image code table'}" v-model="content"></Editor>
    </div>
  </div>
</template>

<script setup lang="ts">
import Editor from '@tinymce/tinymce-vue'
let content:any = ref('')
</script>

<style scoped lang="less">
</style>

4.3. Browser testing

After reading a lot of information, some of the writing is very complicated. After practice, it is as simple as that. More tinymce plug-in integrations are to be added~