通过 JavaScript 滚动到 CKEditor 中的元素

Question

我的 CKEditor 字段通常包含大量带有 h1、h2、h3 等标题的内容，我编写了一个脚本，在边栏中显示所有标题以供快速参考。我还想将此侧边栏用作编辑器内容的导航菜单，因此单击侧边栏中的标题会将编辑器滚动到相关标题，但我不知道如何将其连接起来。

https://davidwalsh.name/scroll-element-ckeditor 处的 post 让我相信这应该是可能的，但我无法弄清楚如何到达 "editor" 中描述的元素31=].

我的侧边栏是用 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 activity.

我正在使用 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();
      }
  });

通过 JavaScript 滚动到 CKEditor 中的元素

Scrolling to elements in CKEditor via JavaScript

ckeditor

ckeditor4.x