TinyMCE Component for SolidJS

About

This package is a wrapper around TinyMCE to make it easier to use in a Solid application.

If you need detailed documentation on TinyMCE, see: TinyMCE Documentation.
This is a community developed package forked from the TinyMCE React, see: Official TinyMCE React for more information.
For our quick demos, check out the demo.

Quick Start Guide

Installation

npm

npm install tinymce-solid

pnpm

pnpm install tinymce-solid

yarn

yarn add tinymce-solid

Basic Usage

SPA Mode

In your usual SolidJS SPA you can use tinymce-solid component like this.

import { createSignal } from "solid-js";
import { TinyMCE, Editor } from "tinymce";
import { SolidEditor } from "tinymce-solid";

export default function App() {
  let editorRef!: Editor;
  const [content, setContent] = createSignal("");

  return (
    <main>
      <SolidEditor
        apiKey="your-api-key"
        value={content()}
        onInit={(_content: string, editor: Editor) => (editorRef = editor)}
        init={{
          menubar: false,
          placeholder: "Write an epic story here...",
          plugins:
            "advlist advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount",
          toolbar:
            "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code | removeformat | help",
        }}
        onEditorChange={(content: string, editor: Editor) => {
          // you can also access the editor's content via its own accessor
          // const newContent = editor.getContent();
          setContent(content);
        }}
      />
    </main>
  );
}

SSR Mode

When using SolidStart in SSR mode, you may want to bring the clientOnly loader, since the TinyMCE editor uses mainly the DOM API.

import { clientOnly } from "@solidjs/start";
import { Component, createSignal } from "solid-js";
import { TinyMCE, Editor } from "tinymce";
import { type IAllProps } from "tinymce-solid";

const SolidEditor = clientOnly<Component<IAllProps>>(() => import("tinymce-solid"));

export default function App() {
  const [content, setContent] = createSignal("");

  return (
    <main>
      <SolidEditor
        apiKey="your-api-key"
        value={content()}
        init={{
          menubar: false,
          placeholder: "Write an epic story here...",
          plugins:
            "advlist advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount",
          toolbar:
            "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code | removeformat | help",
        }}
        onEditorChange={(newContent: string, editor: Editor) => {
          setContent(newContent);
          // hook into the editor instance for additional functionality
        }}
      />
    </main>
  );
}

Some notes

This package will automatically load the tinymce library and its dependencies by the use of the tinymceScriptSrc property
You can make use of the dark mode via TinyMCE skins:
<SolidEditor skin="oxide-dark" contentCss="dark" {...props} />, this very demo is configured to make use of them
The component, like the original, allows you to hook into the TinyMCE instance via an editorRef reference.

Issues

Have you found an issue with tinymce-solid or do you have a feature request? Open up an issue and let us know or submit a pull request.

Note: For issues concerning TinyMCE please visit the TinyMCE repository.

License

tinymce-solid is released under the MIT License.