This mode does not require a websocket connection, but keep in mind pages are fully rendered on the server and delivered to the client as HTML. This means you can lose some of the exciting interactivity introduced by interactive SSR and CSR via WebAssembly. The upside is that without that constant websocket connection your application is now more scalable. Of course you can introduce interactivity back into the parts of your application that actually need it.

Now unto the main task at hand.

What we will try to achieve is integrating TinyMCE into your Static SSR Application without enabling any interactivity. We will accomplish this by configuring Javascript code to execute when a statically rendered page, possibly with enhanced navigation, is loaded or updated.

Step 1.
Register with tinyMCE and get your free API Key

Step 2.
Generate your Blazor Application. In this case I will just use the template that utilizes Interactive Auto, but per component/page. Not globally. With this mode you must enable interactivity where you need it, so by default everything is rendered in Static SSR Mode.

dotnet new blazor -int Auto -o MyTinyMceProject

Step 3.
Enter the project directory and create a Razor Class Library (RCL)

dotnet new razorclasslib -o MyTinyMceScriptInitilizer

Step 4.
Configure these projects such that the RCL is referenced by the main Blazor project

dotnet sln add MyTinyMceProject/MyTinyMceProject.csproj
dotnet sln add MyTinyMceScriptInitilizer/MyTinyMceScriptInitilizer.csproj
dotnet add MyTinyMceProject/MyTinyMceProject.csproj reference MyTinyMceScriptInitilizer/MyTinyMceScriptInitilizer.csproj

Step 5.
In the RCL we need to create two files. In the root of the project create a razor component MyPageScript.razor with the following code.

<page-script src="@Src"></page-script>

@code {
    [Parameter]
    [EditorRequired]
    public string Src { get; set; } = default!;
}

In the wwwroot folder of the RCL create a file MyTinyMceScriptInitilizer.lib.module.js with the following code.

const pageScriptInfoBySrc = new Map();

function registerPageScriptElement(src) {
    if (!src) {
        throw new Error(
            'Must provide a non-empty value for the "src" attribute.'
        );
    }

    let pageScriptInfo = pageScriptInfoBySrc.get(src);

    if (pageScriptInfo) {
        pageScriptInfo.referenceCount++;
    } else {
        pageScriptInfo = { referenceCount: 1, module: null };
        pageScriptInfoBySrc.set(src, pageScriptInfo);
        initializePageScriptModule(src, pageScriptInfo);
    }
}

function unregisterPageScriptElement(src) {
    if (!src) {
        return;
    }

    const pageScriptInfo = pageScriptInfoBySrc.get(src);
    if (!pageScriptInfo) {
        return;
    }

    pageScriptInfo.referenceCount--;
}

async function initializePageScriptModule(src, pageScriptInfo) {
    if (src.startsWith('./')) {
        src = new URL(src.substr(2), document.baseURI).toString();
    }

    const module = await import(src);

    if (pageScriptInfo.referenceCount <= 0) {
        return;
    }

    pageScriptInfo.module = module;
    module.onLoad?.();
    module.onUpdate?.();
}

function onEnhancedLoad() {
    for (const [src, { module, referenceCount }] of pageScriptInfoBySrc) {
        if (referenceCount <= 0) {
            module?.onDispose?.();
            pageScriptInfoBySrc.delete(src);
        }
    }

    for (const { module } of pageScriptInfoBySrc.values()) {
        module?.onUpdate?.();
    }
}

export function afterWebStarted(blazor) {
    customElements.define(
        'page-script',
        class extends HTMLElement {
            static observedAttributes = ['src'];

            attributeChangedCallback(name, oldValue, newValue) {
                if (name !== 'src') {
                    return;
                }

                this.src = newValue;
                unregisterPageScriptElement(oldValue);
                registerPageScriptElement(newValue);
            }

            disconnectedCallback() {
                unregisterPageScriptElement(this.src);
            }
        }
    );

    blazor.addEventListener('enhancedload', onEnhancedLoad);
}

Step 6.
In the main /Components/Pages folder of the main project create two files.

The first file will be your Blazor component in which you want the TinyMCE Editor. We will call this page MyTinyMcePage.razor and in it place the following code.

@page "/tinymce"

<MyTinyMceScriptInitilizer.MyPageScript Src="./Components/Pages/MyTinyMcePage.razor.js?tinymce" />

<EditForm Model="MyPageData" OnValidSubmit="HandleSubmit" FormName="tinymce-page" method="POST"/>
    <div>
        <label>Content:</label>
        <InputTextArea @bind-Value="MyPageData.Content" id="MyPageData_Content">
        </InputTextArea>
    </div>
</EditForm>

@code {

    [SupplyParameterFromForm(FormName = "tinyemce-page")]
    public MyPageModel MyPageData {get; set;} = new();

    private class MyPageModel
        {
           public string? Content { get; set; }
        }

        public void HandleSubmit() {
            Console.Writeline(MyPageData?.Content)
        }
}

The second file will sit right next to the Blazor component and will be called MyTinyMcePage.razor.js and will contain the following code.

TinyMceInit = function (selector) {
    tinymce.remove(`textarea#${selector}`);
    tinymce.init({
        selector: `textarea#${selector}`,
    });
};

export function onLoad() {
    TinyMceInit('MyPageData_Content');
}

export function onUpdate() {
    TinyMceInit('MyPageData_Content');

}

export function onDispose() {}

Step 7.
Finally, update your App.razor component in the root of your main project to have the link to the tinyMCE CDN. place this

    <script src="https://cdn.tiny.cloud/1/<[YOUR_TINYMCE_API_CODE]>/tinymce/6/tinymce.min.js"
        referrerpolicy="origin"></script>

below

    <script src="_framework/blazor.web.js"></script>

That's it! Launch your project, dotnet watch --project MyTinyMceProject --launch-profile https , and enjoy your freshly minted TinyMCE editor.

Note: I have a preference to not install typescript globally and only per project. This setup utilizes vscode.

1. Create your project folder and navigate into it.

2. Create a sub folder "src", in your project folder, in which you will place your code.

3. in the integrated CLI, from your project folder, run the following command

   yarn add -D typescript ts-node
   

4. Run the following command in the CLI to initialize the typescript setup

   npx tsc --init
   

5. configure the generated tsconfig.json to your liking. Here are my settings for example.

   {
    "compilerOptions": {
        "target": "es2016" ,
        "experimentalDecorators": true ,
        "module": "CommonJS" ,
        "rootDir": "./src" ,
        "moduleResolution": "node" ,
        "sourceMap": true ,
        "outDir": "./dist" ,
        "removeComments": true ,
        "noEmitOnError": true ,
        "esModuleInterop": true ,
        "forceConsistentCasingInFileNames": true ,
        "strict": true ,
        "noUnusedLocals": true ,
        "noUnusedParameters": true ,
        "noImplicitReturns": true ,
        "noImplicitOverride": true ,
        "allowUnreachableCode": false ,
        "skipLibCheck": true 
    }
   }
   

6. Set up debugging by opening debugger and create a new "launch.json" file.

   "preLaunchTask": "tsc: build - tsconfig.json",
   

   Add the above line, above the "outFiles" line in "launch.json".

7. Finally to run your code, create a new typescript file, for example "myfile.ts", and from the CLI

   npx ts-node ./src/myfile.ts
   

   The output to your script will be in the terminal.

Optional: Setting up testing

1. Install mocha and chai

   yarn add -D chai mocha @types/chai @types/mocha
   

2. Modify "package.json" add "test": "mocha --require ts-node/register src/**/*.ts" to your scripts key.

3. For simplicity I write the solution and test in the same file. Note too that I name the test similarly to the solution being solved. This will come in handy for running single test.

4. Run the test yarn test --grep "Reverse words"
   I use the name of the test to run ONLY that single test. As we probably do not want to run all test.

All done.

Additionally you can set up a git repo to upload your work to a github or your remote git repository of choice.