![](/img/trans.png)
[英]Q: React-Draft-Wysiwyg How to add custom label to blockTypes?
[英]How to add custom dropdown menu in react-draft-wysiwyg?
我需要在工具欄部分添加自定義下拉菜單。
這里附加的圖像類似於想要下拉菜單,這可能嗎?
<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
在工具欄部分添加自定義下拉菜單。
我希望這仍然相關,但這是我的方式。
對於自定義下拉列表,我創建了一個新組件並使用了文檔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 />]}
/>
我使用了 Tomas 他的代碼並將其更新為 TypeScript/Function 組件。 可以同意這個解決方案在 2020 年仍然可以使用 Draft.js v0.10.5
type ReplacementsProps = {
onChange?: (editorState: EditorState) => void,
editorState: EditorState,
}
export const Replacements = ({onChange, editorState}: ReplacementsProps) => {
const [open, setOpen] = useState<boolean>(false);
const addPlaceholder = (placeholder: string): void => {
const contentState = Modifier.replaceText(
editorState.getCurrentContent(),
editorState.getSelection(),
placeholder,
editorState.getCurrentInlineStyle(),
);
const result = EditorState.push(editorState, contentState, 'insert-characters');
if (onChange) {
onChange(result);
}
};
return (
<div onClick={() => setOpen(!open)} className="rdw-block-wrapper" aria-label="rdw-block-control" role="button" tabIndex={0}>
<div className="rdw-dropdown-wrapper rdw-block-dropdown" aria-label="rdw-dropdown" style={{width: 180}}>
<div className="rdw-dropdown-selectedtext">
<span>YOuR TITLE HERE</span>
<div className={`rdw-dropdown-caretto${open ? 'close' : 'open'}`} />
</div>
<ul className={`rdw-dropdown-optionwrapper ${open ? '' : 'placeholder-ul'}`}>
{placeholderOptions.map(item => (
<li
onClick={() => addPlaceholder(item.value)}
key={item.value}
className="rdw-dropdownoption-default placeholder-li"
>
{item.text}
</li>
))}
</ul>
</div>
</div>
);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.