Sitefinity x Grammarly

sitefinity | .NET, CMS, Sitefinity, C#, Grammarly | 2023-03-20

Background Story

We want to have grammar check while user editing the content.

How we do that?

Firstly, we register a Grammarly account at Grammarly

Add allowed domain of the Sitefinity instance.

Copy the client id as we are going to follow this approach: Grammarly Developer

With the html tag and script.

<grammarly-editor-plugin>
  <textarea></textarea>
</grammarly-editor-plugin>

<script src="https://cdn.jsdelivr.net/npm/@grammarly/editor-sdk?clientId=YOUR_CLIENT_ID"></script>

Also pre-requisite for CMS, adding content security policy (CSP) rule:

script sources

cdn.jsdelivr.net
*.grammarly.com

connect sources

*.grammarly.com
*.grammarly.io
wss://capi.grammarly.com

Two places to amend, the custom sf-html-field and the adminapp

1/ In the custom sf-html-field.sf-cshtml, added the Grammarly wrapper and script to Grammarly

screen1

Result at pop up editing RTE:

screen2

2/ Custom provider at AdminApp to inject the scripts

screen3

Result at the AdminApp powered RTE:

screen4