我在 CKEDITOR 的 Github 页面上问过我的问题，我被要求在这里问：https://github.com/ckeditor/ckeditor4/issues/3555
我正在与 CKEDITOR 合作，使内容可编辑。 当我单击按钮时，编辑器以引导模式打开，这可能就是它不起作用的原因。 这里的问题是我无法专注于在编辑器中插入内容所需的字段。
两个屏幕截图来了解问题： https://i.stack.imgur.com/hrzhY.jpg - 当我无法在输入中写入任何内容时，没有焦点
https://i.stack.imgur.com/Xmy0b.jpg - 当我尝试验证时，因为什么都没有写
这是我的CKEditor配置：
/**
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
config.uiColor = '#AADC6E';
config.extraPlugins = 'ckawesome';
config.fontawesomePath = 'C:/wamp64/www/landing/fontawesome-free-5.10.2-web/css/fontawesome.css';
config.extraPlugins = 'fontawesome';
config.allowedContent = true;
CKEDITOR.dtd.$removeEmpty['i'] = false;
CKEDITOR.dtd.$removeEmpty['span'] = false;
config.protectedSource.push(/<i[^>]*></i>/g);
config.disallowedContent = '<br />';
config.toolbar = 'editor1';
config.toolbar_editor1 = [
{ name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'about', items: [ 'About' ] },
{ name: 'insert', items: [ 'FontAwesome' ] }
];
};
(完整的，+字体真棒插件目前(
这是我的代码中使其工作的部分：
.HTML：
<!-- Modal pop-up for CKEditor -->
<div class="modal" id="wysiwyg-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add custom content</h5>
</div>
<div class="modal-body">
<!-- Hey! -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="close-editor" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
.JS：
// At the beginning of my document ready
// To append the editor
$(".modal-body").append('<div><p name="editor1" id="editor1"></p></div>');
// To avoid conflicts
for(name in CKEDITOR.instances)
{
CKEDITOR.instances[name].destroy(true);
}
// At the beginning too, to avoid a breakline each time I open my editor again
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_BR;
// When I click on a button to open the editor
$('#wysiwyg-modal').modal('show')
CKEDITOR.replace('editor1', {
toolbar: 'editor1',
//uiColor: '#FFDC6E',
});
谢谢你的帮助。
编辑：完全随机地，当我单击需要输入文本的插件之一(如图像(时，我点击了 Escape 键。它使模态关闭，但插件表单仍然会自行打开，我能够在字段中输入。如果我填写字段并尝试按"确定"，则会出现错误"b 未定义"。
这是一个屏幕：https://i.stack.imgur.com/ip8SS.jpg
我解决了这个问题。 引导模态有一个属性tabindex="-1"，这使得 CKEDITOR 插件输入以失去它们的焦点。只需删除它！
你好 2023 和 Bootstrap 5 用户。
您的解决方案如下：
<div class="modal" id="myModal" data-bs-focus="false" role="dialog">
请注意data-bs-focus="false"，因为在 Bootstrap 5 中，他们为函数和数据属性添加了许多"bs"前缀
引导模式的tabindex属性使 ckeditor 对话框中的输入失去焦点。
CKEDITOR.on('dialogDefinition', function (e) {
$(BOOTSTRAP_MODAL_SELECTOR).removeAttr('tabindex');
});