Я использую Ckeditor (https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html).
Теперь я хотел бы использовать класс uk-form-danger (см. https://getuikit.com/docs/form#states-modifiers), если редактор не содержит текста:
:class="{'uk-input': true, 'uk-form-danger': errors.has('description') }"
Это обработанный результат:
<div class="uk-width-1-1 uk-inline"><textarea class="uk-form-danger" aria-required="true" aria-invalid="false"
style="display: none;"></textarea>
<div class="ck ck-reset ck-editor ck-rounded-corners" role="application" dir="ltr" lang="en"
aria-labelledby="ck-editor__aria-label_e0fc70eab3c972fdf9c69e92dc48482de"><label
class="ck ck-label ck-voice-label"
id="ck-editor__aria-label_e0fc70eab3c972fdf9c69e92dc48482de">Rich Text Editor</label>
<div class="ck ck-editor__top ck-reset_all" role="presentation">
<div class="ck ck-sticky-panel">
<div class="ck ck-sticky-panel__placeholder" style="display: none;"></div>
<div class="ck ck-sticky-panel__content">
<div class="ck ck-toolbar">
<div class="ck ck-dropdown ck-heading-dropdown">
<button class="ck ck-button ck-off ck-button_with-text ck-dropdown__button" type="button"
tabindex="-1"
aria-labelledby="ck-editor__aria-label_ee6d67d2db4cd893028c6ccb659029af9"
aria-haspopup="true"><span class="ck ck-tooltip ck-tooltip_s"><span
class="ck ck-tooltip__text">Heading</span></span><span class="ck ck-button__label"
id="ck-editor__aria-label_ee6d67d2db4cd893028c6ccb659029af9">Paragraph</span>
<svg class="ck ck-icon ck-dropdown__arrow" viewBox="0 0 10 10">
<path d="M.941 4.523a.75.75 0 1 1 1.06-1.06l3.006 3.005 3.005-3.005a.75.75 0 1 1 1.06 1.06l-3.549 3.55a.75.75 0 0 1-1.168-.136L.941 4.523z"
fill="#000" fill-rule="evenodd"></path>
</svg>
</button>
<div class="ck ck-reset ck-dropdown__panel">
<ul class="ck ck-reset ck-list">
<li class="ck ck-list__item">
<button class="ck ck-button ck-heading_paragraph ck-on ck-button_with-text"
type="button" tabindex="-1"
aria-labelledby="ck-editor__aria-label_e69d48634813f4e55f8b97ba9dabb478a"
aria-pressed="true"><span
class="ck ck-tooltip ck-tooltip_s ck-hidden"><span
class="ck ck-tooltip__text"></span></span><span
class="ck ck-button__label"
id="ck-editor__aria-label_e69d48634813f4e55f8b97ba9dabb478a">Paragraph</span>
</button>
</li>
<li class="ck ck-list__item">
<button class="ck ck-button ck-heading_heading1 ck-off ck-button_with-text"
type="button" tabindex="-1"
aria-labelledby="ck-editor__aria-label_ec910f3d42267d4074f293ff965996754">
<span class="ck ck-tooltip ck-tooltip_s ck-hidden"><span
class="ck ck-tooltip__text"></span></span><span
class="ck ck-button__label"
id="ck-editor__aria-label_ec910f3d42267d4074f293ff965996754">Heading 1</span>
</button>
</li>
<li class="ck ck-list__item">
<button class="ck ck-button ck-heading_heading2 ck-off ck-button_with-text"
type="button" tabindex="-1"
aria-labelledby="ck-editor__aria-label_e8411e02809e5f661f16be34477f1b1d3">
<span class="ck ck-tooltip ck-tooltip_s ck-hidden"><span
class="ck ck-tooltip__text"></span></span><span
class="ck ck-button__label"
id="ck-editor__aria-label_e8411e02809e5f661f16be34477f1b1d3">Heading 2</span>
</button>
</li>
<li class="ck ck-list__item">
<button class="ck ck-button ck-heading_heading3 ck-off ck-button_with-text"
type="button" tabindex="-1"
aria-labelledby="ck-editor__aria-label_e558c10033dbf72e75b153f5abe8f05e0">
<span class="ck ck-tooltip ck-tooltip_s ck-hidden"><span
class="ck ck-tooltip__text"></span></span><span
class="ck ck-button__label"
id="ck-editor__aria-label_e558c10033dbf72e75b153f5abe8f05e0">Heading 3</span>
</button>
</li>
</ul>
</div>
</div>
<span class="ck ck-toolbar__separator"></span>
<button class="ck ck-button ck-off" type="button" tabindex="-1"
aria-labelledby="ck-editor__aria-label_edf29c6b489e778f6e2477cacbf8d749a">
<svg class="ck ck-icon ck-button__icon" viewBox="0 0 20 20">
<path d="M10.187 17H5.773c-.637 0-1.092-.138-1.364-.415-.273-.277-.409-.718-.409-1.323V4.738c0-.617.14-1.062.419-1.332.279-.27.73-.406 1.354-.406h4.68c.69 0 1.288.041 1.793.124.506.083.96.242 1.36.478.341.197.644.447.906.75a3.262 3.262 0 0 1 .808 2.162c0 1.401-.722 2.426-2.167 3.075C15.05 10.175 16 11.315 16 13.01a3.756 3.756 0 0 1-2.296 3.504 6.1 6.1 0 0 1-1.517.377c-.571.073-1.238.11-2 .11zm-.217-6.217H7v4.087h3.069c1.977 0 2.965-.69 2.965-2.072 0-.707-.256-1.22-.768-1.537-.512-.319-1.277-.478-2.296-.478zM7 5.13v3.619h2.606c.729 0 1.292-.067 1.69-.2a1.6 1.6 0 0 0 .91-.765c.165-.267.247-.566.247-.897 0-.707-.26-1.176-.778-1.409-.519-.232-1.31-.348-2.375-.348H7z"
fill="#000" fill-rule="evenodd"></path>
</svg>
<span class="ck ck-tooltip ck-tooltip_s"><span class="ck ck-tooltip__text">Bold (⌘B)</span></span><span
class="ck ck-button__label"
id="ck-editor__aria-label_edf29c6b489e778f6e2477cacbf8d749a">Bold</span></button>
<button class="ck ck-button ck-off" type="button" tabindex="-1"
aria-labelledby="ck-editor__aria-label_ee24ac0d2a05373fa84a65b18cc497623">
<svg class="ck ck-icon ck-button__icon" viewBox="0 0 20 20">
<path d="M9.586 14.633l.021.004c-.036.335.095.655.393.962.082.083.173.15.274.201h1.474a.6.6 0 1 1 0 1.2H5.304a.6.6 0 0 1 0-1.2h1.15c.474-.07.809-.182 1.005-.334.157-.122.291-.32.404-.597l2.416-9.55a1.053 1.053 0 0 0-.281-.823 1.12 1.12 0 0 0-.442-.296H8.15a.6.6 0 0 1 0-1.2h6.443a.6.6 0 1 1 0 1.2h-1.195c-.376.056-.65.155-.823.296-.215.175-.423.439-.623.79l-2.366 9.347z"
fill="#333" fill-rule="evenodd"></path>
</svg>
<span class="ck ck-tooltip ck-tooltip_s"><span
class="ck ck-tooltip__text">Italic (⌘I)</span></span><span
class="ck ck-button__label"
id="ck-editor__aria-label_ee24ac0d2a05373fa84a65b18cc497623">Italic</span></button>
<span class="ck ck-toolbar__separator"></span>
<button class="ck ck-button ck-off" type="button" tabindex="-1"
aria-labelledby="ck-editor__aria-label_e65176abeb8598d1e76f5637a2f3fcdca">
<svg class="ck ck-icon ck-button__icon" viewBox="0 0 20 20">
<path d="M7 5.75c0 .414.336.75.75.75h9.5a.75.75 0 1 0 0-1.5h-9.5a.75.75 0 0 0-.75.75zm-6 0C1 4.784 1.777 4 2.75 4c.966 0 1.75.777 1.75 1.75 0 .966-.777 1.75-1.75 1.75C1.784 7.5 1 6.723 1 5.75zm6 9c0 .414.336.75.75.75h9.5a.75.75 0 1 0 0-1.5h-9.5a.75.75 0 0 0-.75.75zm-6 0c0-.966.777-1.75 1.75-1.75.966 0 1.75.777 1.75 1.75 0 .966-.777 1.75-1.75 1.75-.966 0-1.75-.777-1.75-1.75z"
fill="#454545" fill-rule="evenodd"></path>
</svg>
<span class="ck ck-tooltip ck-tooltip_s"><span
class="ck ck-tooltip__text">Bulleted List</span></span><span
class="ck ck-button__label"
id="ck-editor__aria-label_e65176abeb8598d1e76f5637a2f3fcdca">Bulleted List</span>
</button>
<button class="ck ck-button ck-off" type="button" tabindex="-1"
aria-labelledby="ck-editor__aria-label_ec6530abc3b13815d1e47fae960fccbb2">
<svg class="ck ck-icon ck-button__icon" viewBox="0 0 20 20">
<path d="M7 5.75c0 .414.336.75.75.75h9.5a.75.75 0 1 0 0-1.5h-9.5a.75.75 0 0 0-.75.75zM3.5 3v5H2V3.7H1v-1h2.5V3zM.343 17.857l2.59-3.257H2.92a.6.6 0 1 0-1.04 0H.302a2 2 0 1 1 3.995 0h-.001c-.048.405-.16.734-.333.988-.175.254-.59.692-1.244 1.312H4.3v1h-4l.043-.043zM7 14.75a.75.75 0 0 1 .75-.75h9.5a.75.75 0 1 1 0 1.5h-9.5a.75.75 0 0 1-.75-.75z"
fill="#454545" fill-rule="evenodd"></path>
</svg>
<span class="ck ck-tooltip ck-tooltip_s"><span
class="ck ck-tooltip__text">Numbered List</span></span><span
class="ck ck-button__label"
id="ck-editor__aria-label_ec6530abc3b13815d1e47fae960fccbb2">Numbered List</span>
</button>
<span class="ck ck-toolbar__separator"></span>
<button class="ck ck-button ck-off" type="button" tabindex="-1"
aria-labelledby="ck-editor__aria-label_ea2eb30023a6b463a9b01c7a71569d4e3">
<svg class="ck ck-icon ck-button__icon" viewBox="0 0 20 20">
<g fill="#000" fill-rule="evenodd">
<path d="M3 10.423a6.5 6.5 0 0 1 6.056-6.408l.038.67C6.448 5.423 5.354 7.663 5.22 10H9c.552 0 .5.432.5.986v4.511c0 .554-.448.503-1 .503h-5c-.552 0-.5-.449-.5-1.003v-4.011-.563zM11 10.423a6.5 6.5 0 0 1 6.056-6.408l.038.67c-2.646.739-3.74 2.979-3.873 5.315H17c.552 0 .5.432.5.986v4.511c0 .554-.448.503-1 .503h-5c-.552 0-.5-.449-.5-1.003v-4.011-.563z"></path>
</g>
</svg>
<span class="ck ck-tooltip ck-tooltip_s"><span
class="ck ck-tooltip__text">Block quote</span></span><span
class="ck ck-button__label"
id="ck-editor__aria-label_ea2eb30023a6b463a9b01c7a71569d4e3">Block quote</span></button>
</div>
</div>
</div>
</div>
<div class="ck ck-editor__main" role="presentation">
<div class="ck ck-content ck-editor__editable ck-rounded-corners ck-blurred ck-editor__editable_inline"
contenteditable="true" role="textbox" aria-label="Rich Text Editor, main"><p><br
data-cke-filler="true"></p></div>
</div>
</div> <!----></div>
И это обработанный вывод:
Так как я могу покрасить границу в красный цвет при ошибке?