ricos-events
ricos-events
npm i ricos-events
ricos-events

ricos-events

A super charged rich content editor with an extensible plugin system.

by wix

9.1.4 (see all)License:ISCTypeScript:Built-In
npm i ricos-events
Readme

A React-based, supercharged rich content editor with an extensible plugin system

lerna


Try out our demo. You can see the full documentation here: https://wix.github.io/ricos/

Quick start

Start with installing the package:

npm i ricos-editor

Then add a basic rich text editor to your app. You can now test typing and adding formatting to your text:

import { RicosEditor } from 'ricos-editor';
import 'ricos-editor/dist/styles.min.css';

<RicosEditor placeholder={'Type here!'} />;

Let's add some plugins:

npm i wix-rich-content-plugin-video wix-rich-content-plugin-divider

Adding videos and dividers:

import { RicosEditor } from 'ricos-editor';
import 'ricos-editor/dist/styles.min.css';
import 'wix-rich-content-plugin-commons/dist/styles.min.css';

import { pluginVideo } from 'wix-rich-content-plugin-video';
import 'wix-rich-content-plugin-video/dist/styles.min.css';

import { pluginDivider } from 'wix-rich-content-plugin-divider';
import 'wix-rich-content-plugin-divider/dist/styles.min.css';

<RicosEditor placeholder={'Type here!'} plugins={[pluginDivider(), pluginVideo()]} />;

There you go! A rich content editor with plugins.

See full documentation

SSR support

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

Using with Yoshi

To use editor with Yoshi, follow the same bootstrapping process, but make sure to include the package .css files from the .global.scss file. For example, create a file named rich-content.global.scss with the following content (make sure to import styles from any plugins you are using as well):

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

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

Development

Prerequisites

  • protoc - install protoc on your local machine

Run Locally

  1. yarn - installs all dependencies and links any cross-dependencies.
  2. yarn build - Build the modules
  3. Run yarn exampleApp or yarn storybook to start the magic

Examples

See rich-content-editor-example to see how to consume the Component as:

Modules

Contributing

Want to help or just have ideas on how to improve Ricos? Open an issue or suggest a pull request.

License

MIT License

Downloads/wk

842

GitHub Stars

252

LAST COMMIT

7mos ago

MAINTAINERS

1

CONTRIBUTORS

74

OPEN ISSUES

5

OPEN PRs

98
VersionTagPublished
9.1.4
latest
8d ago
9.1.4
next
8d ago
8.72.57-pg4
old
23d ago
8.72.23-android-fix.0
android-fix
2mos ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate