如何在react-draft-wysiwyg中添加自定义下拉菜单？

Question

我需要在工具栏部分添加自定义下拉菜单。

这里附上类似想要下拉菜单的图片，这可能吗？

<img src="https://i.imgur.com/OhYeFsL.png" alt="Dropdown menu editor">

在下面找到详细的图像

我使用了react-draft-wysiwyg内容编辑器。

https://github.com/jpuri/react-draft-wysiwyg

https://jpuri.github.io/react-draft-wysiwyg/#/d

在工具栏部分添加自定义下拉菜单。

Answer 1

我希望这仍然有意义，但这是我的方式。

对于自定义下拉列表，我创建了一个新组件，并使用了来自文档https://jpuri.github.io/react-draft-wysiwyg/#/docs的 “向工具栏添加新选项”的方法

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { EditorState, Modifier } from 'draft-js';

class Placeholders extends Component {
  static propTypes = {
    onChange: PropTypes.func,
    editorState: PropTypes.object,
  }

  state = {
    open: false
  }

  openPlaceholderDropdown = () => this.setState({open: !this.state.open})

  addPlaceholder = (placeholder) => {
    const { editorState, onChange } = this.props;
    const contentState = Modifier.replaceText(
    editorState.getCurrentContent(),
    editorState.getSelection(),
    placeholder,
    editorState.getCurrentInlineStyle(),
    );
    onChange(EditorState.push(editorState, contentState, 'insert-characters'));
  }

  placeholderOptions = [
    {key: "firstName", value: "{{firstName}}", text: "First Name"},
    {key: "lastName", value: "{{lastName}}", text: "Last name"},
    {key: "company", value: "{{company}}", text: "Company"},
    {key: "address", value: "{{address}}", text: "Address"},
    {key: "zip", value: "{{zip}}", text: "Zip"},
    {key: "city", value: "{{city}}", text: "City"}
  ]

  listItem = this.placeholderOptions.map(item => (
    <li 
      onClick={this.addPlaceholder.bind(this, item.value)} 
      key={item.key}
      className="rdw-dropdownoption-default placeholder-li"
    >{item.text}</li>
  ))

  render() {
    return (
      <div onClick={this.openPlaceholderDropdown} className="rdw-block-wrapper" aria-label="rdw-block-control">
        <div className="rdw-dropdown-wrapper rdw-block-dropdown" aria-label="rdw-dropdown">
          <div className="rdw-dropdown-selectedtext" title="Placeholders">
            <span>Placeholder</span> 
            <div className={`rdw-dropdown-caretto${this.state.open? "close": "open"}`}></div>
          </div>
          <ul className={`rdw-dropdown-optionwrapper ${this.state.open? "": "placeholder-ul"}`}>
            {this.listItem}
          </ul>
        </div>
      </div>
    );
  }
}

export default Placeholders;

我使用自定义下拉列表添加占位符。但是本质仍然保持不变，因为我将文档中的示例用于自定义按钮。

为了呈现按钮本身，我使用了与其他下拉按钮相同的样式，类和结构。我只是将锚标签切换为div标签，并为悬停样式和胡萝卜更改添加了自定义类。我还使用事件来切换类。

  .placeholder-ul{
    visibility: hidden;
  }
  .placeholder-li:hover {
    background: #F1F1F1;
  }

最后，不要忘记导入一个自定义按钮并将其添加到编辑器。

<Editor
   editorState={this.state.editorState}
   onEditorStateChange={this.onEditorStateChange}
   toolbarCustomButtons={[<Placeholders />]}
/>