Skip to content
A super charged rich text editor with an extensible plugin system.
JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github [*] infra(github actions): disabled tests Oct 17, 2019
.vscode [*] infra(vscode prettier): removed obsolete settings Nov 12, 2019
docs [*] docs(PluginCustomization): update links to examples Nov 12, 2019
e2e [*] chore(release): v6.2.0 Nov 11, 2019
examples [video] fix: file selection and added sample (#468) Nov 14, 2019
packages Babel: new translations for [ rich-content-editor ] from Smartling Nov 15, 2019
scripts [*] infra(deploy + publish): branch name starts with 'release' Oct 29, 2019
.e2e.env.list Feat/preview (#435) Nov 10, 2019
.env.example Merge branch 'develop' (all v6.0.0 changes) Oct 17, 2019
.eslintignore
.eslintrc * [common] fix(linkPanel): retrieve link data from componentData inst… Nov 10, 2019
.gitignore Feat/preview (#435) Nov 10, 2019
.markdownlint.json [*] style(changelog): shaul's a11y issue fixed Mar 6, 2019
.npmrc new-e2e-tests (#334) Aug 11, 2019
.nvmrc [*] infra(node): upgrade node version (10 -> 12) Jul 24, 2019
.stylelintignore [rc] chore(style-lint): ignore file added Jul 15, 2018
.svgorc.json
.travis.yml [*] infra(travis.yml): cache directory for faster builds Nov 10, 2019
CHANGELOG.md
README.md [*] docs(README): removed leftovers Nov 14, 2019
applitools.config.js
babel.config.js * [common] fix(linkPanel): retrieve link data from componentData inst… Nov 10, 2019
babel.jest.monorepo.js [*] infra(babel config): use single babel config file Feb 3, 2019
cypress.ci.json new-e2e-tests (#334) Aug 11, 2019
cypress.json Merge branch 'develop' (all v6.0.0 changes) Oct 17, 2019
cypress.update.json new-e2e-tests (#334) Aug 11, 2019
lerna.json [*] chore(release): v6.2.0 Nov 11, 2019
package-lock.json [example] infra(webpack): @hot-loader/react-dom Nov 14, 2019
package.json [example] infra(webpack): @hot-loader/react-dom Nov 14, 2019
pom.xml ci(1-build-1-repo): customPublish (#27) May 15, 2018
prettier.config.js [*] infra(prettier): applied (#245) Feb 3, 2019
rollup.config.js Merge branch 'develop' (all v6.0.0 changes) Oct 17, 2019
rollup.externals.js Merge branch 'develop' (all v6.0.0 changes) Oct 17, 2019
rollup.plugins.js [image] feat: image-editor (#380) Sep 12, 2019

README.md

Wix Rich Content

lerna Build Status

A React based, super charged rich text editor with an extensible plugin system

Demo

You can try it here: https://wix-rich-content.herokuapp.com/

Installation

To install this package as editor, use the following command (draft-js version):

npm install --save wix-rich-content-editor draft-js

To install this package as viewer, use the following command:

npm install --save wix-rich-content-viewer

To use the editor with <script> tag, consume the following JS file: dist/Common.js and dist/Editor.js from the bundle, and load the matching CSS files:

<html>
  <head>
    <script src="https://unpkg.com/wix-rich-content-common/dist/Common.js"></script>
    <script src="https://unpkg.com/wix-rich-content-editor/dist/Editor.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/wix-rich-content-common/dist/styles.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/wix-rich-content-editor/dist/styles.min.css" />
  </head>
  <body>
    <script>
      const { RichContentEditor, EditorState } = window.WixRichContentEditor;
    </script>

    <!-- ...rest of your app code... -->
  </body>
</html>

Getting Started

1. Basic Editor

To get started with the editor, create a simple React.Component, and import the editor component:

import { EditorState, RichContentEditor } from 'wix-rich-content-editor';

Then, create an empty editorState in your state:

export class MyApp extends React.Component {
  state = {
    editorState: EditorState.createEmpty(),
  };
}

Use the RichContentEditor component in your render function, and implement onChange function:

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 (
      <div>
        <RichContentEditor onChange={this.onChange} editorState={this.state.editorState} />
      </div>
    );
  }
}

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

import 'wix-rich-content-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.

Install the plugin you wish use from NPM:

npm install wix-rich-content-plugin-divider

Import the plugin's stylesheet file in your main app's file:

import 'wix-rich-content-plugin-divider/dist/styles.min.css';

Then, add plugins prop with the plugin's creation method:

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 (
      <div>
        <RichContentEditor
          plugins={PLUGINS}
          onChange={this.onChange}
          editorState={this.state.editorState}
        />
      </div>
    );
  }
}

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

.divider {
  backgorund-color: red;
}

.divider-container {
  border: 1px blue solid;
}
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 (
      <div>
        <RichContentEditor
          theme={THEME}
          plugins={PLUGINS}
          onChange={this.onChange}
          editorState={this.state.editorState}
        />
      </div>
    );
  }
}

You can find a full list of classes you can override in here.

Plugins

wix-rich-content-plugin-divider add dividers to your content

wix-rich-content-plugin-emoji add emojis to your content

wix-rich-content-plugin-hashtag convert plain text #hastags into dynamic elements

wix-rich-content-plugin-html embed html code or sites in your content

wix-rich-content-plugin-link convert plain text URLs into <a> tags

wix-rich-content-plugin-video add videos to your content

wix-rich-content-plugin-mentions mention users in your content

wix-rich-content-plugin-code-block displays code block

wix-rich-content-plugin-image embed images in your content

Private Wix Plugins

wix-rich-content-plugin-gallery embed Wix pro-gallery component in your content

Note: these plugins are found in a separate repository since they are dependent on private Wix code

Usage with Yoshi

To use the editor with Yoshi, you should do the same bootstrapping process, but make sure to include the package's .css files from a .scss file, or add .global to the import:

import 'wix-rich-content-common/dist/styles.min.global.css';
import 'wix-rich-content-editor/dist/styles.min.global.css';

This workaround is required because Yoshi re-compiles CSS files, and applies css-modules again.

SSR support

The compiled package also contains a CommonJS bundle, which you can consume if you are using SSR.

Development

Run Locally

  1. cd rich-content
  2. npm i - installs all dependencies and links any cross-dependencies.
  3. Build the modules by running one of the following:
    1. npm run build - build once and bundles
    2. npm run watch - rebuild on changes
  4. Choose an example and run:
    1. npm start

Examples

rich-content-editor-example to see how to consume the Component as an editor.

rich-content-viewer-example to see how to consume the Component as a viewer.

rich-content-viewer-ssr to see how to consume the Component as a viewer within a Yoshi-based SSR Application.

rich-content-editor-tpa to see how to consume the Component as an editor within a Wix Third Party Application.

Modules

wix-rich-content-editor is the rich content editor React Component.

wix-rich-content-viewer is the rich content viewer React Component.

wix-rich-content-common is a shared library utilized by the rest of the modules.

You can’t perform that action at this time.