sp-dev-fx-webparts/samples/react-tinymce/README.md

---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
  contentType: samples
  technologies:
  - SharePoint Framework
  platforms:
  - react
  createdDate: 3/1/2018 12:00:00 AM
---
# TinyMCE Editor

## Summary
React TinyMCE is one of the worlds most popular editors for the web.
It has many features out of the box and many more plugins that can be
added when needed. You can create your own plugins if you want, the
editor is powered by the community.

![picture of the web part in action](./assets/preview.gif)


## Compatibility

![SPFx 1.4.1](https://img.shields.io/badge/SPFx-1.4.1-green.svg) 
![Node.js v8 | v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg) 
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Compatible with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Compatible-green.svg)
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)

## Applies to

* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)


## Prerequisites
If you are going to use tinymce be aware of it's license, and you must
agree to it.

## Solution

Solution|Author(s)
--------|---------
React-TinyMCE | @AustinBreslinDev

## Version history

Version|Date|Comments
-------|----|--------
1.0|Feb |Initial release

## Minimal Path to Awesome

- Clone this repository
- in the command line run:
  - `npm install`
  - `gulp serve`
  - `add web part to page`


## Features
Description of the web part with possible additional details than in short summary. 
This Web Part illustrates the following concepts on top of the SharePoint Framework:

- Rich text editing, that has more features than the Out of the box.
- Uses an Open Source, community-driven Editor.
- Can be extended to accept copy/paste from using Paste Plugin.
- Can be extended to accept images using the manager in the Editor.
- Can write your own Styles for all content on your site.
- Can style your authoring experience using the skins folder.
- For more features please look at the extensive list of extensions available.


## Disclaimer

**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**


<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/React-TinyMce" />
Added telemetry to every README.md file 2020-04-04 02:18:47 -04:00			`---`
			`page_type: sample`
			`products:`
			`- office-sp`
			`languages:`
			`- javascript`
			`- typescript`
			`extensions:`
			`contentType: samples`
			`technologies:`
			`- SharePoint Framework`
			`platforms:`
			`- react`
			`createdDate: 3/1/2018 12:00:00 AM`
			`---`
Update README.md 2020-11-08 23:44:51 -05:00			`# TinyMCE Editor`
Sample react tinymce (#431) * Tiny MCE Rich Text Editor * added workbench styling, to get a more acurate representation of online. * TinyMCE, Create,Update,Store,Persist,Read rich text * Cleanup of Code * Add readme * Correct filename, add tslint * Correct names in config files. 2018-02-26 03:23:44 -05:00
			`## Summary`
			`React TinyMCE is one of the worlds most popular editors for the web.`
			`It has many features out of the box and many more plugins that can be`
			`added when needed. You can create your own plugins if you want, the`
Fixed sample doc & updated template version badge 2019-09-24 00:28:54 -04:00			`editor is powered by the community.`
Sample react tinymce (#431) * Tiny MCE Rich Text Editor * added workbench styling, to get a more acurate representation of online. * TinyMCE, Create,Update,Store,Persist,Read rich text * Cleanup of Code * Add readme * Correct filename, add tslint * Correct names in config files. 2018-02-26 03:23:44 -05:00
			`![picture of the web part in action](./assets/preview.gif)`

Updated compatiblity matrix 2021-11-07 01:43:55 -04:00
Added all 1.12.1 and 1.13 containers 2022-02-14 02:52:18 -05:00			`## Compatibility`
Updated compatiblity matrix 2021-11-07 01:43:55 -04:00
			`![SPFx 1.4.1](https://img.shields.io/badge/SPFx-1.4.1-green.svg)`
			`![Node.js v8 \| v6](https://img.shields.io/badge/Node.js-v8%20%7C%20v6-green.svg)`
			`![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)`
			`![Compatible with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Compatible-green.svg)`
			`![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")`
			`![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)`
			`![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)`
Sample react tinymce (#431) * Tiny MCE Rich Text Editor * added workbench styling, to get a more acurate representation of online. * TinyMCE, Create,Update,Store,Persist,Read rich text * Cleanup of Code * Add readme * Correct filename, add tslint * Correct names in config files. 2018-02-26 03:23:44 -05:00
			`## Applies to`

URL dev.office.com to docs.microsoft.com 2020-06-09 03:09:22 -04:00			`* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)`
			`* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)`
Sample react tinymce (#431) * Tiny MCE Rich Text Editor * added workbench styling, to get a more acurate representation of online. * TinyMCE, Create,Update,Store,Persist,Read rich text * Cleanup of Code * Add readme * Correct filename, add tslint * Correct names in config files. 2018-02-26 03:23:44 -05:00

			`## Prerequisites`
Fixed sample doc & updated template version badge 2019-09-24 00:28:54 -04:00			`If you are going to use tinymce be aware of it's license, and you must`
Sample react tinymce (#431) * Tiny MCE Rich Text Editor * added workbench styling, to get a more acurate representation of online. * TinyMCE, Create,Update,Store,Persist,Read rich text * Cleanup of Code * Add readme * Correct filename, add tslint * Correct names in config files. 2018-02-26 03:23:44 -05:00			`agree to it.`

			`## Solution`

			`Solution\|Author(s)`
			`--------\|---------`
			`React-TinyMCE \| @AustinBreslinDev`

			`## Version history`

			`Version\|Date\|Comments`
			`-------\|----\|--------`
			`1.0\|Feb \|Initial release`

			`## Minimal Path to Awesome`

			`- Clone this repository`
			`- in the command line run:`
			- `npm install`
			- `gulp serve`
Added links to issue templates 2021-04-26 02:08:59 -04:00			- `add web part to page`
Sample react tinymce (#431) * Tiny MCE Rich Text Editor * added workbench styling, to get a more acurate representation of online. * TinyMCE, Create,Update,Store,Persist,Read rich text * Cleanup of Code * Add readme * Correct filename, add tslint * Correct names in config files. 2018-02-26 03:23:44 -05:00

			`## Features`
			`Description of the web part with possible additional details than in short summary.`
			`This Web Part illustrates the following concepts on top of the SharePoint Framework:`

			`- Rich text editing, that has more features than the Out of the box.`
Added telemetry to every README.md file 2020-04-04 02:18:47 -04:00			`- Uses an Open Source, community-driven Editor.`
Sample react tinymce (#431) * Tiny MCE Rich Text Editor * added workbench styling, to get a more acurate representation of online. * TinyMCE, Create,Update,Store,Persist,Read rich text * Cleanup of Code * Add readme * Correct filename, add tslint * Correct names in config files. 2018-02-26 03:23:44 -05:00			`- Can be extended to accept copy/paste from using Paste Plugin.`
			`- Can be extended to accept images using the manager in the Editor.`
Fixed sample doc & updated template version badge 2019-09-24 00:28:54 -04:00			`- Can write your own Styles for all content on your site.`
Sample react tinymce (#431) * Tiny MCE Rich Text Editor * added workbench styling, to get a more acurate representation of online. * TinyMCE, Create,Update,Store,Persist,Read rich text * Cleanup of Code * Add readme * Correct filename, add tslint * Correct names in config files. 2018-02-26 03:23:44 -05:00			`- Can style your authoring experience using the skins folder.`
			`- For more features please look at the extensive list of extensions available.`

Moved disclaimers to bottom 2021-11-07 01:54:14 -05:00
			`## Disclaimer`

			`*THIS CODE IS PROVIDED AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**`


Updating telemetry link 2021-12-20 10:25:30 -05:00			`<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/React-TinyMce" />`