React Typescript标记细节onclick没有显示在sun编辑器上

Question

我正在使用我的react typescript项目进行Ant设计，

这是我的冲突，我想点击标签并将其显示到Sun编辑器内容区域，所以当我点击标签时，会显示文本区域，但我无法将其添加到Sun编辑器有什么解决办法吗？感谢

此处的stazklitz

此处编码

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Comment, Avatar, Form, Button, List, Input,Tag } from 'antd';
import moment from 'moment';
import 'suneditor/dist/css/suneditor.min.css';
import SunEditor from "suneditor-react";
const { TextArea } = Input;
const CommentList = ({ comments }) => (
<List
dataSource={comments}
header={`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`}
itemLayout="horizontal"
renderItem={props => <Comment {...props} />}
/>
);
const Editor = ({ onChange, onSubmit, submitting, value }) => (
<>
<Form.Item>
<TextArea rows={4} onChange={onChange} value={value} />
</Form.Item>
<Form.Item>
<Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
Add Comment
</Button>
</Form.Item>
</>
);
class App extends React.Component {
state = {
comments: [],
submitting: false,
value: '',
};
handleSubmit = () => {
if (!this.state.value) {
return;
}
this.setState({
submitting: true,
});
setTimeout(() => {
this.setState({
submitting: false,
value: '',
comments: [
...this.state.comments,
{
author: 'Han Solo',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
content: <p>{this.state.value}</p>,
datetime: moment().fromNow(),
},
],
});
}, 1000);
};
handleChange = e => {
this.setState({
value: e.target.value,
});
};
addTag = e => {
const txt = e.target.innerHTML;
this.setState(prevState => ({
...prevState,
value: `${prevState.value} <${txt}> `,
}));
}
render() {
const { comments, submitting, value } = this.state;
return (
<>
<div>
<Tag onClick={this.addTag} color="magenta">First Name</Tag>
<Tag onClick={this.addTag} color="red">Last Name</Tag>
<Tag onClick={this.addTag} color="volcano">NIC</Tag>
<Tag onClick={this.addTag} color="orange">FAX</Tag>

</div>
{comments.length > 0 && <CommentList comments={comments} />}
<Comment
avatar={
<Avatar
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
}
content={
<Editor
onChange={this.handleChange}
onSubmit={this.handleSubmit}
submitting={submitting}
value={value}
/>
}
/>
<SunEditor
autoFocus={true}
width="100%"
height="150px"
onChange={this.handleChange}
onClick={this.onSubmit}
/*       defaultValue={value}*/
setOptions={{
buttonList: [
// default
['undo', 'redo'],
['bold', 'underline', 'italic', 'list'],
['table', 'link', 'image'],
['fullScreen'],
['codeView']
]
}}

setContents={value}
/>
</>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));

[1]: https://www.npmjs.com/package/suneditor-react
[2]: https://stackblitz.com/edit/react-pqp2iu-ynivmu?file=index.js

Answer 1

更新日期：2021年5月13日

在sun编辑器中使用状态会引发handleChange()和addTag()之间的竞争问题，该状态有可能被旧状态取代。

若要消除它，请使用sun编辑器引用来操作内容。

为了添加新文本并将其水平放置，而不是垂直放置，它们具有insertHTML()功能，该功能将尊重html内容，而不首先添加新的<p>。

更新代码：https://stackblitz.com/edit/react-pqp2iu-axacak?file=index.js

• 创建editorRef

constructor() {
super();
this.editorRef = React.createRef();
}

• 将ref应用于sun editior

<SunEditor ref={this.editorRef} ... />

• 删除handleChange()，让sun编辑器自己处理
• 使用insertHTML()附加文本

addTag = e => {
const txt = e.target.innerHTML;
this.editorRef.current.editor.insertHTML(`{${txt}}`);
};

---

旧内容

<和>在sun文本编辑器中具有特殊的含义，它表示<p>、<a>等html标签，并且将对编辑器隐藏。

因此，当您将<Firtname>应用于编辑器时，它将消失。为了能够显示它，我建议您使用SendGrid和Twilio模板使用的胡子语法{}。

除此之外，sun文本编辑器中的handleChange将直接返回内容，因此无需从事件目标获取内容。

这是你的分叉版本与胡子模板

https://stackblitz.com/edit/react-pqp2iu-axacak?file=index.js

handleChange = content => {
console.log(content);
this.setState({
value: content
});
};
addTag = e => {
const txt = e.target.innerHTML;
console.log(txt);
this.setState(prevState => ({
...prevState,
value: prevState.value.replace(/</p>$/, '') + `{${txt}}</p>` // remove the last </p>, append the new content, add back the </p> to avoid new line
}));
};