将数据输入输入时移除 React Trix Color

Question

    <input type="hidden" id="trix-input" 
           value="<div>abc <span style=&quot;color:red;&quot;>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 })}
                />

Answer 1

对于使用 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

将数据输入输入时移除 React Trix Color

React Trix Color is removed when feeding data to input

reactjs

trix