https://github.com/thednp/tinymce-solid
TinyMCE Component for SolidJS
https://github.com/thednp/tinymce-solid
editor solidjs tinymce wysiwyg-editor
Last synced: 11 months ago
JSON representation
TinyMCE Component for SolidJS
- Host: GitHub
- URL: https://github.com/thednp/tinymce-solid
- Owner: thednp
- License: mit
- Created: 2024-05-31T03:41:46.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-24T08:21:12.000Z (about 1 year ago)
- Last Synced: 2025-03-14T12:16:44.572Z (11 months ago)
- Topics: editor, solidjs, tinymce, wysiwyg-editor
- Language: TypeScript
- Homepage: https://thednp.github.io/tinymce-solid
- Size: 11.4 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TinyMCE Component for SolidJS
[
](https://thednp.github.io/tinymce-solid)
[](https://coveralls.io/github/thednp/tinymce-solid)
[](https://github.com/thednp/tinymce-solid/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/tinymce-solid)
[](https://solidjs.com/)
[](https://www.tiny.cloud/)
[](https://www.typescriptlang.org/)
[](https://vitest.dev/)
[](https://github.com/vitejs)
## About
This package is a wrapper around [TinyMCE](https://github.com/tinymce/tinymce) to make it easier to use in a SolidJS / SolidStart application.
- If you need detailed documentation on TinyMCE, see: [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/7/).
- This is a community developed package forked from the TinyMCE React, see: [Official TinyMCE React](https://github.com/tinymce/tinymce-react).
- For a quick test, check out the [demo](https://thednp.github.io/tinymce-solid).
## 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.
```tsx
import { createSignal } from "solid-js";
import { type Editor as TinyEditor } from "tinymce";
import { Editor } from "tinymce-solid";
export default function App() {
let editorRef!: TinyEditor;
const [content, setContent] = createSignal("");
return (
(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: TinyEditor) => {
// you can also access the editor's content via its own accessor
// const newContent = editor.getContent();
setContent(content);
}}
/>
);
}
```
#### 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.
```tsx
import { clientOnly } from "@solidjs/start";
import { Component, createSignal } from "solid-js";
import { type IAllProps } from "tinymce-solid";
const Editor = clientOnly>(() => import("tinymce-solid"));
export default function App() {
const [content, setContent] = createSignal("");
return (
{
setContent(newContent);
}}
/>
);
}
```
### Properties
* *skin*: **reactive** - change the skin of the editor
* *contentCss*: **reactive** - change the styling of the content
* *disabled*: **reactive** - toggles the `disabled` property of the editor
* *value*: **reactive** - the actual content;
* *initialValue*: **reactive** - the initial content value;
* *onEditorChange*: `(content: string, editor: Editor) => void` - the callback you can use to update the parent state;
* *editorRef*: - allows you to hook into the TinyMCE instance for additional functionality;
* all other TinyMCE properties are non-reactive and should work as designed for the original TinyMCE React component.
### 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: `skin="oxide-dark"` and `contentCss="dark"` properties, [the demo](https://thednp.github.io/tinymce-solid) is configured to make use of them via `createEffect`;
- Like the original React adaptation, this component allows you to hook into the TinyMCE instance via an `editorRef` reference.
- We've added tests powered by Vitest, with a real coverage of ~70%, that is becasue many branches cannot be covered in Vitest browser mode and playwright won't work in some Linux distributions for some reason.
## Issues
Have you found an issue with **tinymce-solid** or do you have a feature request? Open up an [issue](https://github.com/thednp/tinymce-solid/issues) and let us know or submit a [pull request](https://github.com/thednp/tinymce-solid/pulls).
_Note: For issues concerning TinyMCE please visit the [TinyMCE repository](https://github.com/tinymce/tinymce)._
## License
**tinymce-solid** is released under the [MIT License](https://github.com/thednp/tinymce-solid/blob/master/LICENSE).