如何更改ckeditor的边框颜色
我正在使用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>
这是渲染的输出：
那么如何在出现错误时将边框涂成红色？
1 个答案:
答案 0 :(得分：0)
您可以使用css变量并在js中使用新方法来为ckeditor设置样式。
getElementsByClassName('ckeditor').style.setProperty('--ck-color-base-border', 'red') //on error
您可以尝试一下，找出有什么可能。以下是可用的CSS变量的参考：https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/theme/ckeditor5-ui/globals/_colors.css
或者您可以走老式的路，在我看来，这很肮脏。
您必须在ckeditor中定位正确的类。当然，将uikit表单状态的类添加到ck编辑器（甚至之前的textarea-然后使用textarea.uk-form-danger + .ck-editor定位），并据此构建规则。正确的类可能是：
.uk-form-danger.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
border-color:red;
}
或者当验证成为焦点时
.uk-form-danger.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
border:red;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？