# Wix Rich Content [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/) [![Build Status](https://travis-ci.org/wix-incubator/rich-content.svg?branch=master)](https://travis-ci.org/wix-incubator/rich-content) ## A React based, super charged rich text editor with an extensible plugin system ![Demo](https://media.giphy.com/media/2rAwp4zLCrtGn2Tlbq/giphy.gif) You can try it here: [https://wix-rich-content.herokuapp.com/](https://wix-rich-content.herokuapp.com/) ## Installation To install this package as editor, use the following command ([draft-js version](https://github.com/wix-incubator/rich-content/blob/master/packages/editor/web/package.json#L49)): ```bash npm install --save wix-rich-content-editor draft-js ``` To install this package as viewer, use the following command: ```bash npm install --save wix-rich-content-viewer ``` To use the editor with ` ``` ## Getting Started ### 1. Basic Editor To get started with the editor, create a simple `React.Component`, and import the editor component: ```jsx import { EditorState, RichContentEditor } from 'wix-rich-content-editor'; ``` Then, create an empty `editorState` in your state: ```jsx export class MyApp extends React.Component { state = { editorState: EditorState.createEmpty(), }; } ``` Use the `RichContentEditor` component in your `render` function, and implement `onChange` function: ```jsx import React from 'react'; import { EditorState, RichContentEditor } from 'wix-rich-content-editor'; export class MyApp extends React.Component { state = { editorState: EditorState.createEmpty(), }; onChange = editorState => { this.setState({ editorState, }); }; render() { return (

); } } ``` Now, to make sure you are getting the most of the rich-content editor, include the compiled CSS files in your app's main file: `app.js` ```jsx import 'wix-rich-content-editor-common/dist/styles.min.css'; import 'wix-rich-content-editor/dist/styles.min.css'; import 'wix-rich-content-plugin-...'/dist/styles.min.css'; ``` > You can also import the CSS files using `@import '~...`;` from a SCSS file. ### 2. Add Plugins To add plugins to your editor, choose one of the implemented plugins from [the list of available plugins](https://github.com/wix-incubator/rich-content/tree/master/packages). Install the plugin you wish use from NPM: ```bash npm install wix-rich-content-plugin-divider ``` Import the plugin's stylesheet file in your main app's file: ```jsx import 'wix-rich-content-plugin-divider/dist/styles.min.css'; ``` Then, add `plugins` prop with the plugin's creation method: ```jsx import React from 'react'; import { EditorState, RichContentEditor } from 'wix-rich-content-editor'; import { createDividerPlugin } from 'wix-rich-content-plugin-divider'; const PLUGINS = [createDividerPlugin]; export class MyApp extends React.Component { state = { editorState: EditorState.createEmpty(), }; onChange = editorState => { this.setState({ editorState, }); }; render() { return (

); } } ``` ### 3. Theme and Custom Styling To customize the look and feel of the editor, you can use `theme` prop, and override the styles as you wish. Use the style's `className` to override. It also support css-modules imports. `my-style.css` ```css .divider { backgorund-color: red; } .divider-container { border: 1px blue solid; } ``` ```jsx import React from 'react'; import { EditorState, RichContentEditor } from 'wix-rich-content-editor'; import { createDividerPlugin } from 'wix-rich-content-plugin-divider'; import dividerTheme from './my-style.css'; const PLUGINS = [createDividerPlugin]; const THEME = { ...dividerTheme, }; export class MyApp extends React.Component { state = { editorState: EditorState.createEmpty(), }; onChange = editorState => { this.setState({ editorState, }); }; render() { return (