{"id":17002511,"url":"https://github.com/thednp/tinymce-solid","last_synced_at":"2025-03-23T17:31:18.735Z","repository":{"id":242004519,"uuid":"808425948","full_name":"thednp/tinymce-solid","owner":"thednp","description":"TinyMCE Component for SolidJS","archived":false,"fork":false,"pushed_at":"2024-11-24T08:21:12.000Z","size":11908,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T12:16:44.572Z","etag":null,"topics":["editor","solidjs","tinymce","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"https://thednp.github.io/tinymce-solid","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thednp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-31T03:41:46.000Z","updated_at":"2025-02-12T02:36:03.000Z","dependencies_parsed_at":"2024-08-11T15:00:14.425Z","dependency_job_id":"edec0b82-9119-4892-8341-00ec4aa59487","html_url":"https://github.com/thednp/tinymce-solid","commit_stats":null,"previous_names":["thednp/tinymce-solid"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thednp%2Ftinymce-solid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thednp%2Ftinymce-solid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thednp%2Ftinymce-solid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thednp%2Ftinymce-solid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thednp","download_url":"https://codeload.github.com/thednp/tinymce-solid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245140982,"owners_count":20567484,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","solidjs","tinymce","wysiwyg-editor"],"created_at":"2024-10-14T04:28:15.200Z","updated_at":"2025-03-23T17:31:18.718Z","avatar_url":"https://github.com/thednp.png","language":"TypeScript","readme":"# TinyMCE Component for SolidJS\n\n[\u003cimg width=\"100%\" src=\"https://raw.githubusercontent.com/thednp/tinymce-solid/main/banner.svg\" alt=\"TinyMCE Component for SolidJS\"\u003e](https://thednp.github.io/tinymce-solid)\n\n[![Coverage Status](https://coveralls.io/repos/github/thednp/tinymce-solid/badge.svg)](https://coveralls.io/github/thednp/tinymce-solid)\n[![ci](https://github.com/thednp/tinymce-solid/actions/workflows/ci.yml/badge.svg)](https://github.com/thednp/tinymce-solid/actions/workflows/ci.yml)\n[![Npm Version](https://img.shields.io/npm/v/tinymce-solid)](https://www.npmjs.com/package/tinymce-solid)\n[![solid-js version](https://img.shields.io/badge/solid--js-1.9.3-brightgreen)](https://solidjs.com/)\n[![tinymce version](https://img.shields.io/badge/tinymce-7.5.1-brightgreen)](https://www.tiny.cloud/)\n[![typescript version](https://img.shields.io/badge/typescript-5.7.2-brightgreen)](https://www.typescriptlang.org/)\n[![vitest version](https://img.shields.io/badge/vitest-2.1.5-brightgreen)](https://vitest.dev/)\n[![vite version](https://img.shields.io/badge/vite-5.4.11-brightgreen)](https://github.com/vitejs)\n\n## About\n\nThis package is a wrapper around [TinyMCE](https://github.com/tinymce/tinymce) to make it easier to use in a SolidJS / SolidStart application.\n\n- If you need detailed documentation on TinyMCE, see: [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/7/).\n- This is a community developed package forked from the TinyMCE React, see: [Official TinyMCE React](https://github.com/tinymce/tinymce-react).\n- For a quick test, check out the [demo](https://thednp.github.io/tinymce-solid).\n\n## Quick Start Guide\n\n### Installation\n\n**npm**\n\n```\nnpm install tinymce-solid\n```\n\n**pnpm**\n\n```\npnpm install tinymce-solid\n```\n\n**yarn**\n\n```\nyarn add tinymce-solid\n```\n\n### Basic Usage\n\n#### SPA Mode\n\nIn your usual SolidJS SPA you can use **tinymce-solid** component like this.\n\n```tsx\nimport { createSignal } from \"solid-js\";\nimport { type Editor as TinyEditor } from \"tinymce\";\nimport { Editor } from \"tinymce-solid\";\n\nexport default function App() {\n  let editorRef!: TinyEditor;\n  const [content, setContent] = createSignal(\"\");\n\n  return (\n    \u003cmain\u003e\n      \u003cEditor\n        apiKey=\"your-api-key\"\n        value={content()}\n        onInit={(_content: string, editor: TinyEditor) =\u003e (editorRef = editor)}\n        init={{\n          menubar: false,\n          placeholder: \"Write an epic story here...\",\n          plugins:\n            \"advlist advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount\",\n          toolbar:\n            \"undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code | removeformat | help\",\n        }}\n        onEditorChange={(content: string, editor: TinyEditor) =\u003e {\n          // you can also access the editor's content via its own accessor\n          // const newContent = editor.getContent();\n          setContent(content);\n        }}\n      /\u003e\n    \u003c/main\u003e\n  );\n}\n```\n\n#### SSR Mode\n\nWhen using SolidStart in SSR mode, you may want to bring the `clientOnly` loader, since the TinyMCE editor uses mainly the DOM API.\n\n```tsx\nimport { clientOnly } from \"@solidjs/start\";\nimport { Component, createSignal } from \"solid-js\";\nimport { type IAllProps } from \"tinymce-solid\";\n\nconst Editor = clientOnly\u003cComponent\u003cIAllProps\u003e\u003e(() =\u003e import(\"tinymce-solid\"));\n\nexport default function App() {\n  const [content, setContent] = createSignal(\"\");\n\n  return (\n    \u003cmain\u003e\n      \u003cEditor\n        apiKey=\"your-api-key\"\n        value={content()}\n        init={{\n          menubar: false,\n          placeholder: \"Write an epic story here...\",\n          plugins:\n            \"advlist advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount\",\n          toolbar:\n            \"undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code | removeformat | help\",\n        }}\n        onEditorChange={(newContent: string) =\u003e {\n          setContent(newContent);\n        }}\n      /\u003e\n    \u003c/main\u003e\n  );\n}\n```\n\n### Properties\n\n* *skin*: **reactive** - change the skin of the editor\n* *contentCss*: **reactive** - change the styling of the content \n* *disabled*: **reactive** - toggles the `disabled` property of the editor\n* *value*: **reactive** - the actual content;\n* *initialValue*: **reactive** - the initial content value;\n* *onEditorChange*: `(content: string, editor: Editor) =\u003e void` - the callback you can use to update the parent state;\n* *editorRef*: - allows you to hook into the TinyMCE instance for additional functionality;\n* all other TinyMCE properties are non-reactive and should work as designed for the original TinyMCE React component.\n\n\n### Some notes\n\n- This package will automatically load the TinyMCE library and its dependencies by the use of the `tinymceScriptSrc` property;\n- 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`;\n- Like the original React adaptation, this component allows you to hook into the TinyMCE instance via an `editorRef` reference.\n- 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.\n\n## Issues\n\nHave 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).\n\n_Note: For issues concerning TinyMCE please visit the [TinyMCE repository](https://github.com/tinymce/tinymce)._\n\n## License\n\n**tinymce-solid** is released under the [MIT License](https://github.com/thednp/tinymce-solid/blob/master/LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthednp%2Ftinymce-solid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthednp%2Ftinymce-solid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthednp%2Ftinymce-solid/lists"}