ckeditor - CKEditor 中的 block /内联 'meta markup'

Question

我正在开发一个自定义 CMS，其中集成了 CKEditor (4.5.1) 以生成友好的 HTML 内容。

我们发布的功能之一是能够将页面的某些部分限制为特定的用户组，据我所知，最简洁的方法是创建一个新标签并使用它来跟踪内容，例如<restrict data-usertype="1,2,3">restricted content for user types 1, 2, 3 here</restrict>这将被后端删除。

我遇到的问题是我的自定义标记隐式需要支持 block 标记和内联标记，并且我不确定如何正确设置。

我尝试了各种组合，要么根本不允许添加任何内容，要么完全禁用该插件(因为它违反了 ACF 自己的健全性检查)；现在我拥有的配置将允许我添加 <restrict> block ，将让我在对话框中编辑它(包括通过双击)，但不会让我嵌套任何类型的任何内容，并且会导致 CKEditor 在切换回源模式时抛出“无法读取 null 属性”警告.

我当前对该插件的配置如下:

    CKEDITOR.dtd.restrict = {
        a: 1, abbr: 1, address: 1, area: 1, article: 1, aside: 1, audio: 1, b: 1, bdi: 1, bdo: 1, blockquote: 1,
        br: 1, button: 1, canvas: 1, cite: 1, code: 1, command: 1, datalist: 1, del: 1, details: 1, dfn: 1, div: 1,
        dl: 1, em: 1, embed: 1, fieldset: 1, figure: 1, footer: 1, form: 1, h1: 1, h2: 1, h3: 1, h4: 1, h5: 1, h6: 1,
        header: 1, hgroup: 1, hr: 1, i: 1, iframe: 1, img: 1, input: 1, ins: 1, kbd: 1, keygen: 1, label: 1, map: 1,
        mark: 1, meter: 1, noscript: 1, object: 1, ol: 1, output: 1, progress: 1, p: 1, pre: 1, q: 1, ruby: 1, s: 1,
        samp: 1, script: 1, section: 1, select: 1, small: 1, span: 1, strong: 1, sub: 1, sup: 1, table: 1,
        textarea: 1, time: 1, u: 1, ul: 1, 'var': 1, video: 1, wbr: 1, '#': 1
    }; // Allow <restrict> as a valid tag.
    CKEDITOR.dtd.$block.restrict = 1;
    CKEDITOR.dtd.$inline.restrict = 1;
    CKEDITOR.dtd.$blockLimit.restrict = 1; // Treat <restrict> as a block limiter tag
    CKEDITOR.dtd.$removeEmpty.restrict = 1; // Remove <restrict /> tags if they are empty
    CKEDITOR.dtd.$transparent.restrict = 1; // Treat the tag as transparent as far as content models go
    CKEDITOR.dtd.body.restrict = 1; // Allow it in the body, div and p tags.
    CKEDITOR.dtd.div.restrict = 1;
    CKEDITOR.dtd.p.restrict = 1;

    var allowedEls = ['restrict'];
    for (var i in CKEDITOR.dtd.restrict) {
        if (CKEDITOR.dtd.restrict.hasOwnProperty(i) && i != '#') {
            allowedEls.push(i);
        }
    }

    // Define the widget.
    editor.widgets.add( 'restrict', {
        button: 'Restricted Content',
        dialog: 'restrictDialog',
        template: '<restrict />',
        editables: {},
        allowedContent: allowedEls.join(' ') + '[*]{*}(*)', // All the above elements, with any attributes, styles or classes.
        requiredContent: 'restrict[data-*]',
        upcast: function (element) {
            return element.name == 'restrict';
        },
        init: function () {
            // Some stuff which iterates through the various
            // properties I care about, grabs from data
            // attributes and pushes to this.setData().
        },
        data: function () {
            // Some stuff that just fetches vars from this.data,
            // sets the relevant data attribute and also sets an
            // attribute on the span created by CKEditor since
            // styling and ::before content is used to show who
            // the block is visible to - the result is much like
            // the Show Blocks plugin. This stuff all works
            // correctly and being omitted changes nothing.
        }
    } );

我想我已经设置了 editables错误地并且可能是该标签的一般允许内容，但我不知道应该如何创建这样的标签，并且我无法想象创建这样一个将在浏览器外部解析的幻像标签会成为一个新问题。

提前致谢!

Answer 1

我实际上找到了这个问题的替代答案，主要是通过稍微重新定义问题来实现的。

首先，我意识到几乎所有时候 CMS 都会限制内容，无论如何它都会在 block 上下文中而不是内联上下文中执行 - 整个 div 部分将被删除而不是行的一部分。

一旦我意识到这一点，我就意识到这实际上并不是我需要构建的小部件，而是一个更传统的插件。

然后我开始使用 CKEditor 的 insert-div 插件，并开始对其进行自定义以适应。在插件的init方法中，有以下初始设置:

CKEDITOR.dtd.restrict = {};
CKEDITOR.tools.extend(CKEDITOR.dtd.restrict, CKEDITOR.dtd.div);
CKEDITOR.dtd.$block.restrict = 1;
CKEDITOR.dtd.$blockLimit.restrict = 1; // Treat <restrict> as a block limiter tag
CKEDITOR.dtd.$removeEmpty.restrict = 1; // Remove <restrict /> tags if they are empty
CKEDITOR.dtd.body.restrict = 1; // Allow it in the body, div and p tags.
CKEDITOR.dtd.div.restrict = 1;

这很大程度上满足了插件的需求，但我正在使用 CKEditor 的预构建副本进行工作，而且我既没有时间也没有意愿设置重建/重新缩小 CKEditor 的过程 - 这是一个问题，因为 $blockLimit仅在启动时使用，并且在插件级别添加到它不起作用，因为它的唯一评估时间已经在加载插件之前运行。为了解决这个问题，该插件在插件运行后克隆了 CKEDITOR.dom.editorPath 的闭包和定义，以便正确地重新评估 DTD 方法。

除此之外，我将所有“creatediv”/“editdiv”/“removediv”引用适本地更改为“*restrict”，将检查“div”的位置更改为“restrict”，并将对话框定义替换为我实际上需要的对话框，这是非常特定于用例的。由于它主要是复制/粘贴工作，因此提供我可以提供的代码似乎并没有多大用处，因为非复制/粘贴的部分特定于产品。

让事情变得更加复杂的是，我还在限制元素上动态管理样式，以产生类似于“显示 block ”标签的外观，其中限制列表通过 restrict::before { content: '...' } 记录在标签本身中指向限制标签本身的一个属性，cke-restrict-description，每次运行对话框以及每次编辑器切换到 WYSIWYG 模式时都会更新该属性(一次在 instanceReady 上，一次在 editor.on('mode' ) 其中 editor.mode == '所见即所得')