vue3.3-TinyMCE: TinyMCE リッチテキストエディターの基本的な使用方法

1.TinyMCE公式サイト

2.公式サイトのご紹介

TinyMCE は、使いやすく強力な WYSIWYG リッチテキストエディターです。同様のプログラムには、UEditor、Kineditor、Simditor、CKEditor、wangEditor、Suneditor、froala などがあります。

TinyMCE の利点:

LGPL2.1に基づいたオープンソースで商用利用可能

豊富なプラグイン、組み込みプラグインは基本的に日常使用に必要な機能をカバーしています（例については、以下のデモ-2を参照）

豊富なインターフェース、強力な拡張性、無限に機能を拡張できる機能

現代の美学に沿った素晴らしいインターフェース

クラシック、インライン、気を散らすことのない没入型の 3 つのモードを提供します (詳細については、「概要と開始方法」を参照してください)。

標準に対する優れたサポート (v5 以降)

多言語サポート、公式ウェブサイトから数十の言語をダウンロードできます。

3. TinyMCEには3つのモードがあります

クラシックモード: フォームに基づいて、フォームのフィールドを使用してコンテンツを入力します。エディターは常にフォームの一部です。

インラインモード (インライン): 編集ビューと閲覧ビューが 1 つに結合され、クリックするとエディターが常に表示されるのではなく、要素がエディターに置き換えられます。

イマージョンフリーモード (気を散らさない): いわゆる「イマージョンモード」は、TinyMCE がインラインモードを別のスタイルとして強制的に解釈しているように感じます。それを暴くこともせず、知らないふりをしましょう。

重要なのは、インラインモードを使用する場合、TinyMCE は編集されたコンテンツをページから分離するために iframe を使用しないことです。この利点は、コンテンツがページの CSS スタイルを継承できることです。編集されたコンテンツは、ページ上で指定されたスタイルに従って完全に表示されるため、まさに「見たものがそのまま得られる」編集体験が提供されます。

4. Vue3.3.4 + ts は TinyMCE を統合します

TinyMCE を Vue 3.3.4 + TypeScript プロジェクトに統合するには、次の手順に従います。

4.1. TinyMCEのインストール

npm または Yarn を使用して TinyMCE の最新バージョンをインストールします。

pnpm add tinymce @tinymce/tinymce-vue

4.2. ビジネスページの利用

<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>