Есть ли способ изменить цвет шрифта в поле ввода форматированного текста Lightning, когда в LWC JS превышен максимальный предел символов?

Я пытаюсь подсчитать количество символов и на этом основании хочу изменить цвет шрифта.

Я пробовал использовать queryselector(), но он не работает:

handleChange(event) {
         if( this.charCount > 100){        
              let textcolor = this.template.queryselector("lightning-input-rich-text");
                 textcolor.getformat({color:"red"});
              }
        }
        

Я также пробовал:

        handleChange(event) {
         if( this.charCount > 100){  
               textcolor = this.template.queryselector('[data-id="summary"]');
           if(textcolor) 
                    this.template.querySelector('[data- 
 id="summarytextcolor"]').className='summarytext';
                 
        }
        }

Вот мой CSS:

.summarytext {color: #ff0000;}

И вот мой код молнии, где я взял поле с форматированным текстом, где при изменении мне нужно фиксировать количество символов:

<lightning-input-rich-text
         data-id="summary"
        label={label.Summary}
        formats={richTextformats}
        label-visible
         valid={richTextValidity}
         message-when-bad-input={richTextErrorMessage}
        class="slds-form-element slds-form-element_stacked summarytext"
        onchange={handleChange}
        value={richTextValue}
        style=" font-weight: normal;">
    </lightning-input-rich-text>

Вот ошибка, которую я получаю:

[NoErrorObjectAvailable] Script error.    a()@https://static.lightning.force.com/cs10/auraFW/javascript/7p9HLMpgnV2GO9MqZhXGUw/aura_prod.js:948:169 {anonymous}()@https://static.lightning.force.com/cs10/auraFW/javascript/7p9HLMpgnV2GO9MqZhXGUw/aura_prod.js:948:362 bt.dispatchEvent()@https://static.lightning.force.com/cs10/auraFW/javascript/7p9HLMpgnV2GO9MqZhXGUw/aura_prod.js:12:12146 bt.dispatchChangeEvent()@https://customization-velocity-2311-dev-ed.lightning.force.com/components/interop/inputRichText.js:2:28144 eval()@https://customization-velocity-2311-dev-ed.lightning.force.com/components/interop/inputRichText.js:2:20578 e.l.emit()@https://customization-velocity-2311-dev-ed.lightning.force.com/components/lightning/quillLib.js:2:142032 e.value()@https://customization-velocity-2311-dev-ed.lightning.force.com/components/lightning/quillLib.js:2:33139

В чем проблема, и как ее исправить?


person user14451028    schedule 14.10.2020    source источник


Ответы (1)


Вы должны иметь возможность установить его с помощью ванильного javascript.

handleChange(event) {
        this.loading = true;
        if(this.charCount > 100){        
             var warn = richTextValue.fontcolor("Red");
             this.richTextValue = warn;
        }
        this.loading = false;
}

Я добавил переменную «загрузка»; просто убедитесь, что вводимый богатый текст заключен в <template if:false={loading}>, чтобы цвет шрифта был повторно отображен.

person Thomas Reinman    schedule 12.04.2021