Как сделать тэг, редактируемый в пользовательском виджетах CKEditor?

Question

Я создал таможню faq виджет для CKEditor 4.5. Файл plugin.js выглядит так. В основном виджет добавляет div для визуализации записи в FAQ с использованием Twitter Bootstrap's сбой.

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'); 
      } 
     }); 
    } 
}); 

Редактирование ответ поле работает нормально, но в CKEditor я не могу редактировать вопрос.

Сгенерированный исходный код в редакторе выглядит следующим образом:

<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

Ok, sometines писать об этом помогает решить это ;-)

мне пришлось добавить <a> тег в список доступных для редактирования элементов:

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

наверх plugins.js