问题描述
我正在使用我的 React typescript 项目进行 Ant 设计，
I'm using my react typescript project for Ant design,
这是我的冲突，我想点击标签及其显示到 Sun 编辑器内容区域 所以当我点击标签时会显示文本区域，但我无法在 sun 编辑器上添加有什么解决办法吗?谢谢
this is my conflict, I wanna click on the tag and its display to Sun editor content area so when I click the tag display the text area but it I cant to add on the sun editorany solution for this?Thanks
代码在这里
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
{comments.length >0 &&<CommentList 评论={comments}/>}<评论头像={<阿凡达src=https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"alt=汉索罗"/>}内容={<编辑器onChange={this.handleChange}onSubmit={this.handleSubmit}提交={提交}价值={价值}/>}/><SunEditor自动对焦={真}宽度=100%"高度=150像素"onChange={this.handleChange}onClick={this.onSubmit}/* 默认值={值}*/设置选项={{按钮列表:[//默认['撤销重做']，['粗体'、'下划线'、'斜体'、'列表']、['表格'，'链接'，'图片']，['全屏']，['代码视图']]}}设置内容={值}/></>);}}ReactDOM.render(, document.getElementById('container'));[1]:https://www.npmjs.com/package/suneditor-react[2]:https://stackblitz.com/edit/react-pqp2iu-ynivmu?file=index.js
推荐答案
UPDATE 13-MAY-2021
在 sun 编辑器中使用 state 会引发 handleChange() 和 addTag() 之间的竞争问题，有可能该 state 会被旧 state 替换.>
要摆脱它，请使用 sun 编辑器引用来操作内容.
To get rid of it, use the sun editor reference to manipulate the content.
为了添加新文本并将其水平放置而不是垂直放置，他们有一个 insertHTML() 函数，该函数将尊重 html 内容，而无需在其中添加新的 <p>第一名.
For adding new text and place it horizontally instead of vertically, they have a insertHTML() function which will respect the html content without adding new <p> in the first place.
更新代码:https://stackblitz.com/edit/react-pqp2iu-axacak?文件=index.js
- 创建 editorRef
constructor() {
super();
this.editorRef = React.createRef();
}
- 将参考应用于 sun 编辑器
<SunEditor ref={this.editorRef} ... />
- 去掉
handleChange()，交给sun editor自己处理 - 使用
insertHTML()附加文本
addTag = e => {
const txt = e.target.innerHTML;
this.editorRef.current.editor.insertHTML(`{${txt}}`);
};
旧内容
< 和 > 在 sun 文本编辑器中具有特殊的含义，它表示像 <p> < 这样的 html 标签;a> 等，它将在编辑器中隐藏.
< and > have special meaning in sun text editor which is representing html tags like <p> <a> etc and it will be hidden from the editor.
因此，当您将 应用到编辑器时，它就会消失.为了能够显示它，我建议您使用 SendGrid、Twilio 模板也使用的 mustache 语法 {}.
Therefore, when you apply <Firtname> to the editor, it will disappear. To be able to display it, I suggest you to use mustache syntax {} which is used by SendGrid, Twilio template as well.
除此之外，sun 文本编辑器中的 handleChange 将直接返回内容，因此无需从事件目标中获取.
Other than that, handleChange in sun text editor will return you the content directly so there is no need to get it from event target.
这是你的带有小胡子模板的分叉版本
Here is the forked version of yours with mustache template
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
}));
};
这篇关于React Typescript 标签详细信息 onclick 未显示在 sun 编辑器上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！