gpt4 book ai didi

reactjs - dangerouslySetInnerHTML inside textarea - 表情符号标记

转载 作者:行者123 更新时间:2023-12-02 21:11:11 26 4
gpt4 key购买 nike

我正在尝试在文本区域内呈现表情符号,此时我被难住了。

https://jsfiddle.net/nvt7qjar/

我看不到如何在文本区域内使用 dangerouslySetInnerHTML 的值,所以当您添加表情符号时,您会看到它们在预览中呈现吗?

提前致谢。

使用的表情符号库

<script src="//cdn.jsdelivr.net/emojione/1.5.0/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/1.5.0/assets/css/emojione.min.css" />

代码:

var Emoji = React.createClass({
rawMarkup: function() {
var rawMarkup = emojione.shortnameToImage(this.props.emojcode.toString(), {sanitize: true});
return { __html: rawMarkup };
},

handleClick: function(id) {
this.props.handleClick(id);
},


render: function() {
return (
<div id="emojText">
<button onClick={this.handleClick.bind(this, this.props.emojcode)}><span dangerouslySetInnerHTML={this.rawMarkup()} /></button>
</div>
);
}
});

var App = React.createClass({

getInitialState: function() {
return {
data: [':grinning:', ':joy:', ':smiley:', ':laughing:' ],
text: ''
};
},

_onChange: function(event, value) {
this.setState({
text: event.target.value
});
},

handleClick(item) {
this.setState({
text: this.state.text +=item
});
},

rawMarkup: function() {
var rawMarkup = emojione.shortnameToImage(this.state.text.toString(), {sanitize: true});
return { __html: rawMarkup };
},



render: function() {
var _this = this;
var data = this.state.data.map(function(item){
return (
<Emoji emojcode={item} handleClick={_this.handleClick}/>
);
});

return (
<div className="container">
<span dangerouslySetInnerHTML={this.rawMarkup()} />
{data}
<div className="clearfix"></div>
<textarea
className="message-composer"
name="message"
value={this.state.text}
onChange={this._onChange.bind(this)}
/>
</div>
);
}
});

ReactDOM.render(
<App name="World" />,
document.getElementById('container')
);

最佳答案

你必须使用content editable div eg

<div contenteditable='true'><div>

关于reactjs - dangerouslySetInnerHTML inside textarea - 表情符号标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33381835/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com