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

要求

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

过程

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

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

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

    cd my-example-app

  3. 安装所需的 Node.js 组件，包括 Laravel Mix：

    npm install

  4. 下载 TinyMCE。

  5. 将下载的 TinyMCE .zip 文件解压（或解压缩）到 Laravel 项目的 resources/js/ 目录中，例如：

    unzip ../tinymce_latest.zip -d resources/js

  6. 添加一个 Laravel Mix 任务，以便在运行 Mix 时将 TinyMCE 复制到公共文件中，例如：

    文件： webpack.mix.js

    mix.copyDirectory('resources/js/tinymce/js/tinymce', 'public/js/tinymce');

  7. 运行 Laravel Mix 将 TinyMCE 复制到 public/js/ 目录：

    npx mix

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

    php artisan make:component Head/tinymceConfig

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

  9. 在文本编辑器中打开新创建的 .blade.php 文件，并用以下内容替换内容：

    • TinyMCE 源脚本。

    • TinyMCE 配置。

      例如：

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

      <script src="{{ asset('js/tinymce/tinymce.min.js') }}" referrerpolicy="origin" crossorigin="anonymous"></script>
<script>
  tinymce.init({
    selector: 'textarea#myeditorinstance', // Replace this CSS selector to match the placeholder element for TinyMCE
    license_key: 'gpl',
    plugins: 'code table lists',
    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table'
  });
</script>
      gpl 许可证密钥用于在 GNU General Public License (GPL) 下自托管 TinyMCE。要使用商业许可证或包含高级插件，请将 gpl 替换为有效的许可证密钥。详细信息，请参阅 设置许可证。

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

    php artisan make:component Forms/tinymceEditor

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

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

    例如：

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

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

  12. 在需要 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>
    <!-- Insert the blade containing the TinyMCE configuration and source script -->
    <x-head.tinymce-config/>
  </head>
  <body>
    <h1>TinyMCE in Laravel</h1>
    <!-- Insert the blade containing the TinyMCE placeholder HTML element -->
    <x-forms.tinymce-editor/>
  </body>
</html>

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

    php artisan serve

后续步骤

关于以下信息：