Question

我想将滚动条标记实现到 ckeditor 中，我似乎无法找到正确的方法来实现这一目标

var win = new CKEDITOR.dom.window( window );
var pos = win.getScrollPosition();
console.log(pos);

但它只返回Google Chrome滚动条x = 0＆amp; Y = 0

var win = new CKEDITOR.dom.window( domWindow );
var pos = win.getScrollPosition();
console.log(pos);

这给我一个错误domWindow未定义

我发现这个例子可能有所帮助：https://codepen.io/Rplus/pen/mEjWJm

(() => {
  var containerQS = '.article';
  var container = document.querySelector(containerQS); 
  var form = document.querySelector('.form');
  var input = form.querySelector('input[type="text"]'); 
  var markClass = 'mark';
  var markerHeight = '2px';
  var _color = 'currentColor'; 
  var containerY = container.offsetTop;
  var containerH = container.scrollHeight; 
  var customStyle = document.createElement('style');
  container.appendChild(customStyle); 
  var renderScrollMarker = ($parent, posArr) => {
   var _posArr = posArr.map(i => {
      return `transparent ${i}, ${_color} ${i}, ${_color} calc(${i} + 
${markerHeight}), transparent calc(${i} + ${markerHeight})`;
    }); 
    customStyle.innerHTML = `article::-webkit-scrollbar-track {
        background-image: linear-gradient(${_posArr.join()});
     }`;
  }; 
  var calcEleRelativePos = ($ele) => {
    return ($ele.offsetTop - containerY) / containerH;
  }; 
  var markOpt = {
    className: markClass,
    done: function () {
     var marks = document.querySelectorAll(`.${markClass}`);
     var allY = [].map.call(marks, (mark) => {
        return (calcEleRelativePos(mark) * 100).toFixed(2) + '%';
     });
     renderScrollMarker(container, allY);
     console.log(allY);
   }
  }; 
  var instance = new Mark(container); 
  form.addEventListener('submit', (e) => {
   e.preventDefault();
   var _text = input.value.trim(); 
   console.log(_text, form.oldText); 
    if (_text === '') {
       instance.unmark(markOpt);
      return;
   } 
   form.oldText = _text;
    instance.unmark().mark(_text, markOpt);
 }); 
  // trigger
  form.querySelector('input[type="submit"]').click(); 
 })();

但是由于ckeditor确保了很多元素，我很想知道是否有任何人在使用CKeditor之前做过这个

Answer 1

我刚刚获得了真正的编辑器滚动条位置，我只需要使用样式或任何可用的方法放置标记

var win=CKEDITOR.instances.editor1.document.getWindow();
var pos = win.getScrollPosition().y;                                        
console.log(pos);

Answer 2

这对我有用：

    var jqDocument = $(editor.document.$);
    var documentHeight = jqDocument.height();
    var scrollTo =jqDocument.scrollTop();
    var docHeight = jqDocument.height();
    var scrollPercent = (scroll)/(docHeight);
    var scrollPercentRounded = Math.round(scrollPercent*100); 
    $(".ui-slider-handle").css("bottom", 100-scrollPercentRounded+"%");

Ckeditor滚动条标记/文本位置指示符

2 个答案: