本指南展示了如何使用 TinyMCE Vue.js 组件 将 TinyMCE 从 Tiny Cloud 集成到 Vue.js 应用程序中。

前置条件

此过程需要：

操作步骤

  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. 更新 App.vue 以包含来自 tinymce/tinymce-vue 的 Editor，如下所示：例如：

    <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>"
      apiKey="no-api-key"
      :init="{
        plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks 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>

  5. 使用您的 Tiny Cloud API 密钥 更新 apiKey 属性。

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

    npm run dev

其他资源