如何为Laravel表单的内容区域集成Grammarly插件？

我有一段Laravel Blade模板代码，想给其中的content文本域添加Grammarly插件，尝试用<grammarly-editor-plugin>包裹textarea但无效。

原Blade代码片段：

@section('content')
    <form method="post" action="{{ route('member.articles.store') }}" enctype="multipart/form-data"
          onSubmit="submit.disabled=true; submit.value='{{ __('Submitting ...') }}'; return true;">
        @csrf
        <div class="card bg-light">
            <div class="card-header">{{ __('Add Article') }}</div>
            <div class="card-body">
                <!-- 其他表单字段 -->
                <div class="form-group">
                    {{ Form::label('content', __('Content')) }}
                    {{ Form::textarea('content', old('content'), ['class' => 'form-control text-editor'])}}
                </div>

尝试的无效写法：

<div class="form-group">
    {{ Form::label('content', __('Content')) }}
    <grammarly-editor-plugin>
        {{ Form::textarea('content', old('content'), ['class' => 'form-control text-editor'])}}
    </grammarly-editor-plugin>            
</div>

1. 加载Grammarly Editor SDK #

首先在页面的<head>中引入Grammarly的SDK脚本（可放在布局模板如layouts/app.blade.php中）：

<script src="https://cdn.grammarly.com/editor-sdk/1.0/grammarly-editor-sdk.js"></script>

2. 配置插件并包裹textarea #

你需要为<grammarly-editor-plugin>添加有效的Client ID（需在Grammarly开发者平台创建应用获取），同时根据文本域类型选择对应配置：

场景一：纯文本textarea（无富文本编辑器）

如果text-editor仅为样式类，不涉及富文本编辑器，修改代码如下：

<div class="form-group">
    {{ Form::label('content', __('Content')) }}
    <grammarly-editor-plugin client-id="你的Grammarly客户端ID" autocomplete="off">
        {{ Form::textarea('content', old('content'), [
            'class' => 'form-control',
            'rows' => 10,
            'required' => true
        ]) }}
    </grammarly-editor-plugin>
</div>

• 确保插件标签直接包裹textarea，无多余嵌套元素
• 添加autocomplete="off"避免浏览器自动填充干扰

场景二：兼容富文本编辑器（如CKEditor/TinyMCE）

如果text-editor是富文本编辑器的初始化类，不能直接用<grammarly-editor-plugin>包裹，需通过对应编辑器的Grammarly插件集成：

1. 安装编辑器对应的Grammarly插件（比如CKEditor的@grammarly/ckeditor-plugin）
2. 初始化编辑器时配置Grammarly：

ClassicEditor
    .create(document.querySelector('.text-editor'), {
        grammarly: {
            clientId: '你的Grammarly客户端ID'
        }
    })
    .catch(err => console.error(err));

此时无需使用<grammarly-editor-plugin>标签。

3. 验证必要配置 #

• 确认Client ID有效，且已在Grammarly开发者平台配置了当前网站域名的白名单
• 打开浏览器控制台检查是否有加载或权限报错
• 确保页面没有其他脚本阻止Grammarly SDK运行

内容的提问来源于stack exchange，提问作者OLD HAWKS UNITED