Прокрутка до элементов в CKEditor через JavaScript

Question

Мои поля CKEditor часто содержат много контента с заголовками h1, h2, h3 и т. Д., И я написал скрипт, который представляет все заголовки на боковой панели для быстрого ознакомления.Я также хотел бы использовать эту боковую панель в качестве меню навигации для содержимого редактора, поэтому при щелчке заголовка на боковой панели редактор перемещается к связанному заголовку, но я не могу понять, как все это связать.

Этот пост на https://davidwalsh.name/scroll-element-ckeditor заставляет меня поверить, что это возможно, но я не могу понять, как добраться до элемента "editor", описанного в посте.

Моя боковая панель построена с помощью jQuery из текстовой области CKEditor с id = "content" следующим образом ...

var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
  sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);

Я предполагаю, что с помощью jQuery: contains () для идентификации элементов заголовка в редакторе на основетекст, который они содержат, но я не могу понять, как подключиться к экземпляру CKEditor таким образом, чтобы включить этот вид активности DOM.

Я использую CKEditor 4, но я рад перейти на версию 5, еслион предлагает лучшее решение моей проблемы.

Спасибо!

Answer 1

Вот что у меня получилось:

  var content = $('<div/>').append($('#content').val());
  var sidebar = "";
  $(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
  $(content).find('.heading').each(function () {
    sidebar += this.outerHTML;
  });
  $('#sidebar').html(sidebar);
  $('#sidebar .heading').click(function() {
      var element = $('#cke_content iframe').contents().find(':contains(' + $(this).text() + ')')[2];
      if (element) {
          element.scrollIntoView();
      }
  });