【问题标题】:CKEditor Plugin - can allowedContent apply to elements deeper in the hierarcy, or can the MagicLine be disabled on certain elements?CKEditor Plugin - allowedContent 可以应用于层次结构更深的元素,还是可以在某些元素上禁用 MagicLine?
【发布时间】:2020-03-18 20:15:36
【问题描述】:

我正在编写一个基于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>

问题是当用户将鼠标悬停在&lt;div class="card"&gt;的子元素上时会出现magicLine)。有没有办法只为这些元素禁用魔术线,或者以一种也会影响层次结构中的子元素的方式应用 allowedContent 属性?下面的 javascript 显示了我如何使用 allowedContent,但它似乎只适用于外部 &lt;section&gt; 及其直接子 &lt;div class="card"&gt;。 .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,
            ...
            ...    

【问题讨论】:

    标签: javascript jquery bootstrap-4 ckeditor drupal-8


    【解决方案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);
    

    【讨论】:

    • 嗨,你是如何使用这个模块的?你愿意分享你的工作吗?
    猜你喜欢
    • 2020-07-12
    • 2021-08-10
    • 1970-01-01
    • 1970-01-01
    • 2012-09-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多