本指南展示了如何在 Vue.js 应用程序中使用 TinyMCE Vue.js 组件，从 .zip 包中自托管并延迟加载 TinyMCE。

先决条件

此过程需要：

步骤

  1. 使用 Create Vue 工具创建一个名为 tinymce-vue-demo 的新 Vue 项目。

    • 在命令行或命令提示符中，创建 Vue.js 3.x 项目：tinymce-vue-demo。

      npm create vue@3

    • 如果需要 Vue.js 2.x 项目，请使用：

      npm create vue@2

    • 按照提示操作，并将项目名称输入为 tinymce-vue-demo。

  2. 进入新创建的目录。

    cd tinymce-vue-demo

  3. 安装 tinymce-vue 包。

    • 对于 Vue.js 3.x 用户：

      npm install @tinymce/tinymce-vue

    • 对于 Vue.js 2.x 用户：

      npm install @tinymce/tinymce-vue@^3

  4. 将 TinyMCE zip 中 tinymce/js 文件夹的内容解压到 public 文件夹。

  5. 使用以下代码片段更新 App.vue。注意：tinymceSrcScript 引用使用绝对根路径的公共 tinymce。

    <script setup>
import Editor from '@tinymce/tinymce-vue'
</script>

<template>
  <main id="sample">
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <Editor
      id="<uid>"
      licenseKey="gpl"
      tinymceScriptSrc="/tinymce/tinymce.min.js"
      :init="{
        plugins: 'advlist anchor autolink code help image insertdatetime link lists media table wordcount',
        toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        height: 500
      }"
    />
  </main>
</template>

<style scoped>
.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  #sample {
    display: flex;
    flex-direction: column;
    place-items: center;
    width: 1000px;
  }
}
</style>

  6. 要启动开发服务器，请运行：

    npm run dev

其他资源