将数据输入输入时移除 React Trix Color
React Trix Color is removed when feeding data to input
<input type="hidden" id="trix-input"
value="<div>abc <span style="color:red;">123</span></div>"
/>
<trix-editor input="trix-input"></trix-editor>
我希望上面的代码打印 abc 123(红色),但是该值已从其 CSS 样式中删除。
上面的代码在 HTML 页面上工作,但是当我把它放在反应组件上时 CSS 样式被删除。
如果有任何帮助,我将不胜感激。
谢谢
更新:
React 组件 - CSS 被剥离
<trix-editor
style={{ minHeight: 300 }}
input={"trix" + this.props.index}
ref={this.trixInput}
/>
<input
type="hidden"
id={"trix" + this.props.index}
value={this.props.journals.article.paragraphs[this.props.index].paragraph}
className={classnames('', { 'is-invalid': errors.paragraph })}
/>
对于使用 React 遇到相同问题的任何人,请在导入 React 和 Trix 后执行以下操作:
import React, { Component } from 'react'
import Trix from "trix";
Trix.config.attachments.preview.caption.name = false //remove caption
Trix.config.attachments.preview.caption.size = false //remove caption size
Trix.config.textAttributes.textColour = {
styleProperty: "color",
inheritable: true,
} //set config for custom colors
<input type="hidden" id="trix-input"
value="<div>abc <span style="color:red;">123</span></div>"
/>
<trix-editor input="trix-input"></trix-editor>
我希望上面的代码打印 abc 123(红色),但是该值已从其 CSS 样式中删除。
上面的代码在 HTML 页面上工作,但是当我把它放在反应组件上时 CSS 样式被删除。
如果有任何帮助,我将不胜感激。
谢谢
更新:
React 组件 - CSS 被剥离
<trix-editor
style={{ minHeight: 300 }}
input={"trix" + this.props.index}
ref={this.trixInput}
/>
<input
type="hidden"
id={"trix" + this.props.index}
value={this.props.journals.article.paragraphs[this.props.index].paragraph}
className={classnames('', { 'is-invalid': errors.paragraph })}
/>
对于使用 React 遇到相同问题的任何人,请在导入 React 和 Trix 后执行以下操作:
import React, { Component } from 'react'
import Trix from "trix";
Trix.config.attachments.preview.caption.name = false //remove caption
Trix.config.attachments.preview.caption.size = false //remove caption size
Trix.config.textAttributes.textColour = {
styleProperty: "color",
inheritable: true,
} //set config for custom colors