如何将Grammarly编辑器插件封装为可用于EventListener的函数

问题描述 #

我需要将以下Grammarly编辑器插件相关代码封装为函数，以便添加到EventListener中调用。
待封装的代码如下：

<script src="https://unpkg.com/@grammarly/editor-sdk?clientId=YOUR_CLIENT_ID"></script>
<grammarly-editor-plugin>
<textarea></textarea>
</grammarly-editor-plugin>

期望的代码形式参考（暗黑模式插件写法）：

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
function addDarkmodeWidget() {
new Darkmode().showWidget();
}
window.addEventListener('load', addDarkmodeWidget);
</script>

解决方案 #

你可以通过动态加载SDK脚本并创建DOM元素的方式，将Grammarly编辑器的初始化逻辑封装成函数，再绑定到页面加载事件上。以下是两种实用实现方式：

方式一：动态创建全新的编辑器元素 #

这种方式会在页面加载完成后，自动创建grammarly-editor-plugin容器和内部的textarea，并添加到页面指定位置：

<script>
function addGrammarlyEditor() {
  // 动态创建Grammarly SDK脚本标签
  const grammarlyScript = document.createElement('script');
  grammarlyScript.src = 'https://unpkg.com/@grammarly/editor-sdk?clientId=YOUR_CLIENT_ID';
  grammarlyScript.async = true;

  // 脚本加载完成后初始化编辑器
  grammarlyScript.onload = function() {
    // 创建Grammarly插件容器
    const pluginContainer = document.createElement('grammarly-editor-plugin');
    // 可按需设置插件属性，比如深色主题：pluginContainer.setAttribute('theme', 'dark');

    // 创建文本输入框
    const textarea = document.createElement('textarea');
    textarea.placeholder = '请输入文本...';

    // 组装元素并添加到页面（示例添加到body，可替换为你需要的DOM节点）
    pluginContainer.appendChild(textarea);
    document.body.appendChild(pluginContainer);
  };

  // 将脚本添加到页面头部
  document.head.appendChild(grammarlyScript);
}

// 页面加载完成后触发编辑器初始化
window.addEventListener('load', addGrammarlyEditor);
</script>

方式二：为页面已有的textarea添加Grammarly插件 #

如果页面中已经存在需要绑定Grammarly的textarea，可以用这种方式，直接将目标textarea包裹进grammarly-editor-plugin容器：

<!-- 页面中已有的文本输入框 -->
<textarea id="target-textarea" placeholder="请输入文本..."></textarea>

<script>
function addGrammarlyEditor() {
  const grammarlyScript = document.createElement('script');
  grammarlyScript.src = 'https://unpkg.com/@grammarly/editor-sdk?clientId=YOUR_CLIENT_ID';
  grammarlyScript.async = true;

  grammarlyScript.onload = function() {
    // 获取页面中已有的textarea
    const targetTextarea = document.getElementById('target-textarea');
    if (!targetTextarea) return;

    // 创建Grammarly插件容器
    const pluginContainer = document.createElement('grammarly-editor-plugin');
    
    // 将textarea替换为插件容器，再把textarea放入容器内
    targetTextarea.parentNode.replaceChild(pluginContainer, targetTextarea);
    pluginContainer.appendChild(targetTextarea);
  };

  document.head.appendChild(grammarlyScript);
}

window.addEventListener('load', addGrammarlyEditor);
</script>

内容的提问来源于stack exchange，提问作者Lee Rankin