Question

就像标题所说，我无法编辑CKEditor上的链接。我有一个全新的安装，当我输入一个我想要标记为链接的文本时，弹出的链接将打开所有字段和按钮，但它们不起作用 - 除了浏览服务器按钮。

他们甚至没有残疾颜色，他们只是不工作！下拉菜单无法打开，文本区域/字段不可编辑！我试图用最新的jquery版本更新，我测试没有其他插件也使用javascript，可能会发生冲突，但它仍然无法正常工作。是的，我还测试了一个干净的缓存！编辑链接的唯一方法是在源模式下执行此操作。

那么，有关问题的建议是什么？

这是config.js：

CKEDITOR.editorConfig = function( config ) {

       config.filebrowserBrowseUrl = 'kcfinder/browse.php?type=files';
       config.filebrowserImageBrowseUrl = 'kcfinder/browse.php?type=images';
       config.filebrowserFlashBrowseUrl = 'kcfinder/browse.php?type=flash';
       config.filebrowserUploadUrl = 'kcfinder/upload.php?type=files';
       config.filebrowserImageUploadUrl = 'kcfinder/upload.php?type=images';
       config.filebrowserFlashUploadUrl = 'kcfinder/upload.php?type=flash';


    // Define changes to default configuration here.
    // For the complete reference:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    // Remove some buttons, provided by the standard plugins, which we don't
    // need to have in the Standard(s) toolbar.
    config.removeButtons = 'Subscript,Superscript';

    // Se the most common block elements.
    config.format_tags = 'p;h1;h2;h3;h4;h5;pre';

    // Make dialogs simpler.
    config.removeDialogTabs = 'image:advanced;';

    config.language = 'sv';

    config.extraPlugins = 'format,horizontalrule,templates';

    CKEDITOR.config.autoParagraph = false;

    config.allowedContent = true;

};

Answer 1

经过6天不断的谷歌搜索，测试和尝试后，我终于找到了解决方案！ ckeditor和Bootstrap之间似乎存在不兼容问题。

提供了正确的解决方案here by aaronsnow。

感谢所有试图帮助我的人！

Answer 2

此帖子可能会有所帮助： CKEditor + Magnific Popup. Link editing does not work

这是另一个示例（基于 CKEditor5 ）：

let theEditor;

ClassicEditor
  .create(document.querySelector('#editor'), {

    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote']
  })
  .then(editor => {
    theEditor = editor;

  })
  .catch(error => {
    console.error(error);
  });

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

.ck-editor__editable {
  min-height: 150px;
}

body {
  --ck-z-default: 100;
  --ck-z-modal: calc( var(--ck-z-default) + 999);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/classic/ckeditor.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          <textarea name="content" id="editor">
          <p>Lorem ipsum dolor sit ameta quam, nec bibendum neq</p>
          </textarea>

        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>

</div>

Answer 3

@ Penny-Liu的链接正确。它与模型之间的冲突（引导程序，magnificpopup以及其他可能存在的冲突）有关。

对于巨大的弹出窗口，解决方案很简单：

$.magnificPopup.instance._onFocusIn = function(e) {
  if( $(e.target).hasClass('ck-input') ) {
     return true;
  } 
  $.magnificPopup.proto._onFocusIn.call(this,e);
};

Answer 4

对我来说，我已经通过设置解决了它：

 .ck.ck-balloon-panel {
        z-index: 1050 !important;
    }

Answer 5

CKeditor Link不能以模式运行，下面的解决方案解决了该问题

.ck-rounded-corners .ck.ck-balloon-panel, .ck.ck-balloon-panel.ck-rounded-corners {
    z-index: 10055 !important;
}

无法编辑CKEditor上的链接

5 个答案: