如何在 Laravel 应用程序中自托管 TinyMCE

2024-03-12 00:58:01

自托管 TinyMCE：将富文本编辑器集成到 Laravel 应用程序

简介

在现代 Web 开发中，富文本编辑器（WYSIWYG）已成为不可或缺的工具，让用户能够轻松创建和编辑复杂的文本内容。TinyMCE 作为业界领先的 WYSIWYG 编辑器，以其功能强大、易于使用以及高度可定制性而著称。本文旨在指导你将 TinyMCE 无缝集成到你的 Laravel 应用程序中，并将其配置为自托管。

集成 TinyMCE

1. 安装依赖项

首先，使用 Composer 安装 TinyMCE 包：

composer require tinymce/tinymce

2. 配置 TinyMCE

将以下配置添加到 config/app.php：

'providers' => [
    // ... 其他提供商
    'TinyMCE\TinyMCE\TinyMCEServiceProvider',
],

然后，在 config/tinymce.php 中添加以下配置：

return [
    'default' => 'cloud',
    'cloud' => [
        'api_key' => env('TINYMCE_API_KEY'),
    ],
    'self_hosted' => [
        'selector' => 'textarea.tinymce',
        'base_url' => '/vendor/tinymce',
        'suffix' => '.min',
    ],
];

3. 使用自托管 TinyMCE

在视图文件中包含以下代码：

@tinymce('self_hosted')
    <textarea name="content" class="tinymce"></textarea>
@endtinymce

这将创建一个自托管 TinyMCE 实例，并将其附加到具有 tinymce 类的所有 <textarea> 标签。

解决“window is not defined”错误

在使用服务器端渲染 (SSR) 模式时，可能会遇到 “window is not defined” 错误。这是因为 TinyMCE 需要在浏览器中运行，而 SSR 是在服务器上执行的。

4. 添加 SSR 支持

在 webpack.mix.js 文件中添加以下内容：

const fs = require('fs');

mix.js('resources/js/app.js', 'public/js')
    .sourceMaps()
    .version()
    .webpackConfig({
        plugins: [
            new HtmlWebpackPlugin({
                inject: false,
                template: './public/index.html',
            }),
            new WebpackSSR({
                outputFile: 'server.js',
                template: './public/index.html',
                runtime: 'ssr-runtime.js',
            }),
        ],
    })
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('postcss-nested'),
        require('postcss-cssnext'),
    ]);