Try out our demo. You can see the full documentation here: https://wix.github.io/ricos/
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 { 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.
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.
protoc
- install protoc on your local machine
yarn
- installs all dependencies and links any cross-dependencies.yarn build
- Build the modules- Run
yarn exampleApp
oryarn storybook
to start the magic
See rich-content-editor-example to see how to consume the Component as:
-
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-editor-common is a shared library utilized by the rest of the modules.
Want to help or just have ideas on how to improve Ricos? Open an issue or suggest a pull request.