javascript - CKEditor Plugin - allowedContent 可以应用于层次结构更深的元素，还是可以在某些元素上禁用 MagicLine？

Question

我正在编写一个基于CKEditor Accordion Module的 drupal 模块，但使用的是 Bootstrap 4。插件插入的 HTML 如下所示：

<section class="accordion" id="Accordion1">
    <div class="card">
        <div class="card-header" id="heading1">
            <h2><button aria-controls="collapse1" aria-expanded="false" class="btn btn-link"
                    data-target="#collapse1" data-toggle="collapse" type="button">Collapsible Item Heading</button>
            </h2>
        </div>

        <div aria-labelledby="heading1" class="collapse" data-parent="#Accordion1" id="collapse1">
            <div class="card-body">
                <p>Collapsed Text</p>
            </div>
        </div>
    </div>
</section>

问题是当用户将鼠标悬停在 ) 的子元素上时会出现magicLine<div class="card">。有没有办法只为这些元素禁用魔术线，或者以一种也会影响层次结构中的子元素的方式应用 allowedContent 属性？下面的 javascript 显示了我如何使用 allowedContent，但它似乎只适用于外部<section>及其直接子项<div class="card">。.card div 的任何子项似乎都允许在其中添加任何类型的内容。

(function() {
    'use strict';

    // Register plugin.
    CKEDITOR.plugins.add('bscollapse', {
        hidpi: true,
        icons: 'bscollapse',
        init: function(editor) {
 
            ...
            ...

            //elements [attributes]{styles}(classes)
            var allowedContent = 'section[id](!accordion); div(!card)';

            // Command to insert initial structure.
            editor.addCommand('addBSCollapseCmd', {
                allowedContent: allowedContent,
            ...
            ...    

标签： javascriptjquerybootstrap-4ckeditordrupal-8

Answer 1

回答我自己的问题：

可以使用以下代码禁用魔术线插件 - 我的插件称为 ckeditor_bscollapse。

ckeditor_bscollapse.libraries.yml

bscollapse_style:
  version: 1.x
  css:
    theme:
      css/ckeditor-bscollapse.css: {}
  js:
    js/ckeditor-bscollapse.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupal

js/ckeditor-bscollapse.js：

/**
 * @file
 * CKEditor BSCollapse functionality.
 */

(function($, Drupal, drupalSettings) {
    'use strict';

    Drupal.behaviors.ckeditorBSCollapse = {
        attach: function(context, settings) {
            CKEDITOR.config.removePlugins = 'magicline';
        }
    };
})(jQuery, Drupal, drupalSettings);