The documentation currently represents the 2.0.0-rc8 release.
For troubleshooting please checkout theFAQ

Link

Supported Environment

  • Desktop: Yes
  • Mobile: No
  • Screen-reader: No

Getting Started

This plugin allows you to add link entities via the inline toolbar. It also provides a decorator that formats the created entities.

npm install [email protected] --save
npm install [email protected] --save
npm install [email protected] --save
gettingStarted.js
// It is important to import the Editor which accepts plugins.
import Editor from 'draft-js-plugins-editor';
import createLinkPlugin from 'draft-js-anchor-plugin';
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import { ItalicButton, BoldButton, UnderlineButton } from 'draft-js-buttons';
import React from 'react';

// Here's your chance to pass in a configuration object (see below).
const linkPlugin = createLinkPlugin();

// Pass the `linkPlugin.LinkButton` into the structure of the inline toolbar.
const inlineToolbarPlugin = createInlineToolbarPlugin({
  structure: [
    BoldButton,
    ItalicButton,
    UnderlineButton,
    linkPlugin.LinkButton
  ]
});

const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin, linkPlugin];

const MyEditor = ({ editorState, onChange }) => (
  <div>
    <Editor
      editorState={editorState}
      onChange={onChange}
      plugins={plugins}
    />
    <InlineToolbar />
  </div>
);

export default MyEditor;

The plugin ships with a default styling available at this location:  node_modules/draft-js-anchor-plugin/lib/plugin.css. If you want to use the default styles, you can include this stylesheet (Webpack usage). Otherwise you can supply your own styles via the `theme` config option.

Configuration Parameters

themeObject of CSS classes with the following keys:
input:CSS class for the input field in the add link form.
inputInvalid:CSS class for the input field when the URL is invalid.
link:CSS class for the link in the editor content.
placeholderThe placeholder that is shown when the input field is empty.
linkTargetThe target attribute of the link.
LinkSpecify the link component that will be rendered.

Simple Link Plugin Example

Try selecting a part of this text and click on the link button in the toolbar that appears …
SimpleLinkPluginEditor.js
import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import createLinkPlugin from 'draft-js-anchor-plugin';
import { ItalicButton, BoldButton, UnderlineButton } from 'draft-js-buttons';
import editorStyles from './editorStyles.css';

const linkPlugin = createLinkPlugin();
const inlineToolbarPlugin = createInlineToolbarPlugin({
  structure: [
    BoldButton,
    ItalicButton,
    UnderlineButton,
    linkPlugin.LinkButton
  ]
});
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin, linkPlugin];
const text = 'Try selecting a part of this text and click on the link button in the toolbar that appears …';

export default class SimpleLinkPluginEditor extends Component {
  state = {
    editorState: createEditorStateWithText(text)
  };

  onChange = (editorState) =>
    this.setState({ editorState });

  focus = () =>
    this.editor.focus();

  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={plugins}
          ref={(element) => { this.editor = element; }}
        />
        <InlineToolbar />
      </div>
    );
  }
}

Custom Link Plugin Example

Try selecting a part of this text and click on the link button in the toolbar that appears …
CustomLinkPluginEditor.js
import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import createLinkPlugin from 'draft-js-anchor-plugin';
import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
} from 'draft-js-buttons';
import editorStyles from './editorStyles.css';
import buttonStyles from './buttonStyles.css';
import toolbarStyles from './toolbarStyles.css';
import linkStyles from './linkStyles.css';

const linkPlugin = createLinkPlugin({
  theme: linkStyles,
  placeholder: 'http://…'
});
const inlineToolbarPlugin = createInlineToolbarPlugin({
  theme: { buttonStyles, toolbarStyles },
  structure: [
    BoldButton,
    ItalicButton,
    UnderlineButton,
    linkPlugin.LinkButton
  ]
});
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin, linkPlugin];
const text = 'Try selecting a part of this text and click on the link button in the toolbar that appears …';

export default class ThemedInlineToolbarEditor extends Component {
  state = {
    editorState: createEditorStateWithText(text)
  };

  onChange = (editorState) =>
      this.setState({ editorState });

  focus = () =>
      this.editor.focus();

  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={plugins}
          ref={(element) => { this.editor = element; }}
        />
        <InlineToolbar />
      </div>
    );
  }
  }
linkStyles.css
.input {
  height: 34px;
  width: 220px;
  padding: 0 12px;
  font-size: 15px;
  font-family: inherit;
  background-color: transparent;
  border: none;
  color: #ddd;
}

.input:focus {
  outline: none;
}

.input::placeholder {
  color: #aaa;
}

.inputInvalid {
  color: #e65757;
}

.link {
  color: #2996da;
  text-decoration: underline;
}