如何在Draft.js的linkify插件编辑模式下启用左键点击链接功能

Absolutely! I’ve dealt with this exact requirement before, and there’s a straightforward way to make links clickable while editing using the draft-js-linkify-plugin. The core idea is to override the default link component that the plugin renders, so we can add click handling logic that bypasses Draft.js’s default text-editing behavior.

Here’s a step-by-step implementation:

1. Create a Custom Link Component #

First, build a custom <a> component that handles clicks properly. We need to stop Draft.js from intercepting the click event (which would normally focus the text for editing) and instead open the link.

import React from 'react';

const CustomClickableLink = ({ children, url }) => {
  const handleLinkClick = (e) => {
    // Stop Draft.js from taking over the click event
    e.stopPropagation();
    // Open the link in a new tab (adjust to '_self' if you want same tab)
    window.open(url, '_blank', 'noopener noreferrer');
  };

  return (
    <a
      href={url}
      onClick={handleLinkClick}
      style={{
        color: '#1a0dab',
        textDecoration: 'underline',
        cursor: 'pointer',
      }}
    >
      {children}
    </a>
  );
};

2. Pass the Custom Component to the Linkify Plugin #

When initializing the linkify plugin, use the component option to tell it to use your custom link component instead of the default one.

import { Editor, EditorState } from 'draft-js';
import createLinkifyPlugin from 'draft-js-linkify-plugin';
import 'draft-js-linkify-plugin/lib/plugin.css';

// Initialize the plugin with our custom component
const linkifyPlugin = createLinkifyPlugin({
  component: CustomClickableLink,
});

const MyRichTextEditor = () => {
  const [editorState, setEditorState] = React.useState(
    () => EditorState.createEmpty()
  );
  const plugins = [linkifyPlugin];

  return (
    <Editor
      editorState={editorState}
      onChange={setEditorState}
      plugins={plugins}
      placeholder="Type something with a link (like https://example.com)..."
    />
  );
};

export default MyRichTextEditor;

Key Notes: #

• e.stopPropagation() is critical here: it prevents Draft.js’s editor from focusing on the link text when you click it, which would otherwise override our click behavior.
• Adding noopener noreferrer to window.open is a security best practice when opening external links.
• If you’re using React Router for internal links, replace window.open with navigate(url) (from react-router-dom) instead—just make sure to adjust the handleClick logic accordingly.
• Ensure you’re using a recent version of draft-js-linkify-plugin; the component configuration option was added in newer releases, so older versions might not support it.

This setup will make any auto-detected links clickable even while you’re actively editing in the editor—clicking them will open the URL instead of entering text-editing mode.

内容的提问来源于stack exchange，提问作者sahil solanki