wix-rich-content-plugin-line-spacing
wix-rich-content-plugin-line-spacing
npm i wix-rich-content-plugin-line-spacing
wix-rich-content-plugin-line-spacing

wix-rich-content-plugin-line-spacing

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

by wix

9.1.5 (see all)License:ISCTypeScript:Built-In
npm i wix-rich-content-plugin-line-spacing
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

4.2K

GitHub Stars

254

LAST COMMIT

7mos ago

MAINTAINERS

9

CONTRIBUTORS

74

OPEN ISSUES

5

OPEN PRs

79
VersionTagPublished
9.1.5
latest
3d ago
9.1.5
next
3d ago
8.72.57-pg4
old
1mo 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