如何在自定义 CKEditor 小部件中使 a-tag 可编辑？

Question

我为 CKEditor 4.5 创建了一个自定义 faq 小部件。 plugin.js 文件如下所示。小部件基本上添加了一个 div 以使用 Twitter Bootstrap 的 collapse 功能呈现 FAQ 条目。

CKEDITOR.plugins.add('faq', {
    requires: 'widget',
    icons: 'faq',

    init: function (editor) {
        var id = Math.random().toString(36).substr(2);
        editor.widgets.add('faq', {

            button: 'Create FAQ entries',

            template: '<div class="faq"><a class="faq-question" data-toggle="collapse" href="#faq-' + id +
                        '" aria-expanded="true" aria-controls="faq-' + id + '"><p>Question ...?</p></a>' +
                        '<div class="collapse in faq-answer" id="faq-' + id +'">Answer ...</div></div>',

            editables: {
                question: {
                    selector: '.faq-question'
                },
                answer: {
                    selector: '.faq-answer'
                }
            },

            allowedContent: 'div(!faq); a(!faq-question); div(!faq-answer); a',
            requiredContent: 'div(!faq)',

            upcast: function (element) {
                return element.name == 'div' && element.hasClass('faq');
            }
        });
    }
});

编辑 answer 字段工作正常，但在 CKEditor 中我无法编辑 question。

在编辑器中生成的源代码如下所示：

<div class="faq">
    <a aria-controls="faq-fk7stx54sfpnl8fr" aria-expanded="true" class="faq-question" data-toggle="collapse" href="#faq-fk7stx54sfpnl8fr">Question ...?</a>    
    <div class="collapse in faq-answer" id="faq-fk7stx54sfpnl8fr"><p>Answer ...</p></div>
</div>

Answer 1

好的，有些人写下它有助于解决它;-)

我不得不将 <a> 标签添加到可编辑元素列表中，如下所示：

CKEDITOR.dtd.$editable['a'] = 1;

在 plugins.js 文件的顶部

如何在自定义 CKEditor 小部件中使 a-tag 可编辑？

How to make an a-tag editable in custom CKEditor widget?

widget

ckeditor

ckeditor4.x