Laravel 是一个基于 PHP 构建的可扩展 Web 应用框架。本指南协助将 TinyMCE 从 Tiny Cloud 添加到 Laravel 的页面或视图中。本过程中创建的示例 Laravel 项目基于 通过 Composer 安装 部分中 Laravel 文档所记录的 Laravel 项目。本指南将创建两个 blade：一个用于 JavaScript，另一个用于编辑器占位符，以反映 TinyMCE 在生产环境中的使用方式。

要求

本过程假设已安装以下先决条件：

过程

  1. 在命令行（或命令提示符）中，运行以下命令创建一个名为 my-example-app 的新 Laravel 项目：

    composer create-project laravel/laravel my-example-app

  2. 进入 Laravel 应用的根目录，例如：

    cd my-example-app

  3. 为 TinyMCE 配置创建一个可重用的 组件 (blade.php)，例如：

    php artisan make:component Head/tinymceConfig

    这将创建 blade 文件 resources/views/components/head/tinymce-config.blade.php。

  4. 在文本编辑器中打开新创建的 .blade.php 文件，并将其内容替换为：

    • TinyMCE 源脚本。

    • TinyMCE 配置。

      例如：

      文件： resources/views/components/head/tinymce-config.blade.php

      <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
<script>
  tinymce.init({
    selector: 'textarea#myeditorinstance', // 替换此 CSS 选择器以匹配 TinyMCE 的占位符元素
    plugins: 'code table lists',
    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table'
  });
</script>

  5. 将 TinyMCE 源脚本中的 no-api-key 替换为您的 Tiny Cloud API 密钥。

    要注册 Tiny Cloud API 密钥，请访问 Tiny 账户注册页面。要检索现有 Tiny 账户的 Tiny Cloud API 密钥，请登录并访问 Tiny 账户仪表板。

  6. 创建第二个 blade，其中包含 TinyMCE 的占位符 HTML 元素，例如：

    php artisan make:component Forms/tinymceEditor

    这将创建 blade 文件 resources/views/components/forms/tinymce-editor.blade.php。

  7. 在文本编辑器中打开新创建的 .blade.php 文件，并将其内容替换为与编辑器配置中 selector 选项提供的 CSS 选择器相匹配的占位符。

    例如：

    文件： resources/views/components/forms/tinymce-editor.blade.php

    <form method="post">
  <textarea id="myeditorinstance">Hello, World!</textarea>
</form>

  8. 在需要 TinyMCE 的页面或视图中添加 blade 组件。配置 blade（本例中的 Head/tinymceConfig）可以添加到目标页面或视图的 <head> 中，或位于 <body> 末尾。占位符 blade（Forms/tinymceEditor）应添加到页面中需要 TinyMCE 的位置。

    例如：

    文件： resources/views/welcome.blade.php

    <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TinyMCE in Laravel</title>
    <!-- 插入包含 TinyMCE 配置和源脚本的 blade -->
    <x-head.tinymce-config/>
  </head>
  <body>
    <h1>TinyMCE in Laravel</h1>
    <!-- 插入包含 TinyMCE 占位符 HTML 元素的 blade -->
    <x-forms.tinymce-editor/>
  </body>
</html>

  9. 启动 Laravel 开发服务器以验证 TinyMCE 是否在页面或视图中加载，例如运行以下命令并在 localhost 上打开页面。

    php artisan serve

后续步骤

有关以下信息：