logo标签列表

如何使内联的CKEditor在div中滚动？

javascripthtmlcssckeditorckeditor4.x
20

当在body上进行滚动时，内联CKEditor会正确地随着文本滚动。以下是一个官方演示。

http://sdk.ckeditor.com/samples/inline.html

然而，当滚动不在body中而在iframe或div中时，即使到目前为止（版本4.5.5），滚动也无法正常工作。这里有一些问题，例如：

Ckeditor内联编辑器在滚动“可滚动”div时仍保留在屏幕上

这个解决方案是有效的，但我可能在同一页上有超过20个编辑器，检查每个编辑器对我的页面来说太重了。

在iframe中的元素上使用CKEditor内联编辑器

另一个看起来不错的解决方案对我并不起作用，但我想要的是像这个解决方案一样的轻量级解决方案。

附言：对于那些想要测试你的解决方案是否起作用的人，这里是你可以测试的代码开头： https://jsfiddle.net/pteryvk3/6/

  <script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<div id='' style="overflow: scroll;height:500px;width:90%;position:absolute">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.

<br>
<div id='editable' style="color:red" contenteditable=true>editable div</div>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus, urna nec condimentum pellentesque, quam lacus vulputate neque, in efficitur nunc nibh at odio. Mauris elementum sed dui et gravida. Donec a facilisis augue. Donec pellentesque dolor a dui varius dapibus. Nunc posuere sem non quam tristique, vitae placerat risus eleifend. Mauris sed ligula a odio imperdiet accumsan quis pellentesque lorem. Aliquam sed tincidunt mi, a tristique ex. Pellentesque eu convallis turpis, non auctor massa. Aliquam vel consectetur ipsum. Vestibulum lacus nisi, tincidunt ut nunc sit amet, dapibus laoreet dui. Duis et tempus erat.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eu luctus nunc, ac consequat risus. Nam et tellus elit. Mauris aliquam, eros mattis placerat euismod, nunc nunc blandit sapien, quis hendrerit dui arcu nec felis. Aenean ut mattis mauris, a viverra est. Cras tincidunt elit quis rhoncus suscipit. Nullam sit amet lectus arcu. Sed at lacus congue turpis volutpat convallis. Ut dapibus, nulla nec sodales rhoncus, risus metus sollicitudin orci, sit amet congue urna mauris vitae dui. Integer vel leo neque. Aenean sit amet dui eget mi eleifend hendrerit eget finibus leo. Sed at orci eu nisl cursus mollis.

Donec suscipit sem at sem tristique, ac blandit ipsum tincidunt. Aenean ullamcorper massa erat, eget ultricies nunc ornare id. Donec sit amet sodales ligula. Nunc luctus, leo ut eleifend suscipit, mi neque efficitur neque, iaculis congue nisl ex aliquet mi. Aliquam non fringilla dui, ut mattis neque. Morbi ut massa dolor. Praesent vulputate finibus mauris, aliquam mollis ante iaculis quis. Mauris lobortis nisi et diam eleifend, varius mollis tellus dictum. Praesent mattis auctor odio in sodales. Duis tempus volutpat arcu quis vestibulum. Pellentesque enim tellus, dignissim pharetra neque sit amet, mattis pellentesque ipsum. In feugiat, leo et interdum ultrices, justo mi laoreet quam, vitae convallis dolor quam sit amet massa. In sed lacinia libero. Sed leo quam, tempus ut mi in, vehicula convallis turpis. Nulla a consectetur sem. Integer vehicula arcu sed laoreet ornare.

Praesent blandit id arcu sit amet varius. Sed auctor aliquet posuere. Nullam pretium, velit vel rhoncus dignissim, lacus tellus tincidunt sapien, nec volutpat nibh lectus sed nunc. Aenean malesuada est ornare gravida tincidunt. Phasellus eu sem non odio sollicitudin rutrum a vel tellus. Phasellus mauris tellus, convallis ac placerat vitae, accumsan nec orci. Nunc quis turpis porta, ornare lectus pretium, vestibulum magna. Integer eleifend lacinia mi dapibus pretium. Phasellus viverra nisi ligula, sit amet finibus lorem lobortis sit amet. Nam diam enim, condimentum quis facilisis id, vestibulum at tortor. Ut mollis, quam a vulputate efficitur, sem magna iaculis eros, quis dictum nulla dui vitae orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nulla nec lobortis libero. Aliquam in rhoncus eros. In mauris ipsum, cursus non consequat at, euismod id tortor. Aenean in pellentesque mauris. Vivamus tincidunt vitae lorem et venenatis. Curabitur auctor consectetur gravida. Aliquam scelerisque eros a tellus laoreet condimentum eget sit amet metus. Etiam auctor, libero eget convallis laoreet, velit eros ullamcorper risus, a sodales erat dolor vel orci. Curabitur et bibendum eros, id laoreet enim. Quisque cursus, est ac auctor bibendum, libero sapien rutrum tellus, at semper mauris velit rhoncus leo. Pellentesque consectetur tortor id arcu molestie, id convallis velit luctus.

Maecenas mattis id risus ut convallis. Vivamus iaculis ut odio feugiat tincidunt. Integer pellentesque purus euismod velit ultricies, vitae lobortis nunc sagittis. Etiam rhoncus vel dolor eget venenatis. Donec porta sit amet lacus non finibus. Fusce sagittis condimentum augue nec interdum. Duis auctor vitae nisl at aliquet. In vulputate convallis nibh, eget viverra arcu ultrices eget. Morbi eu eleifend metus, ac egestas quam. Vivamus id libero dapibus, tempus mauris at, auctor lacus.

Integer elementum nibh eget dolor tincidunt, non tempus arcu convallis. Mauris quis lacus in enim dapibus tempor eu vitae odio. Sed quis mattis nisl. Cras hendrerit dolor sit amet velit luctus interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam lectus quam, interdum non diam nec, vestibulum molestie quam. Fusce non elementum lacus. Curabitur eget vestibulum diam. Integer nec lorem leo. Suspendisse finibus, tellus sed varius faucibus, ex dui imperdiet sapien, quis ultrices massa arcu quis est. Duis ultrices diam a lobortis dictum. Nunc eu est lobortis, pellentesque turpis vitae, finibus diam. Quisque sit amet pretium nunc, non mattis augue.

Phasellus ac lacus erat. Donec suscipit tincidunt nisi vitae volutpat. Curabitur ullamcorper massa lacus, id fringilla dui convallis vitae. Praesent non enim eget dui placerat finibus vitae at ante. Suspendisse nec mauris vel urna porta porta. In vitae rhoncus tellus. Praesent eu nisl non mauris semper porttitor mollis vel leo.

Duis condimentum aliquam viverra. Integer leo lacus, bibendum non augue eu, blandit mollis eros. Quisque finibus pretium nisi eu placerat. In ultrices rutrum tellus molestie auctor. Nunc lobortis venenatis euismod. Aliquam et orci eget neque accumsan varius. Cras ac eros ut nulla tempor efficitur aliquet id enim. Nunc dictum mattis nulla, eu vehicula sapien vulputate nec.

Sed fermentum nulla ac tortor suscipit, nec varius neque eleifend. Morbi odio ligula, eleifend nec dignissim non, venenatis et ante. Nam finibus molestie tortor vel consectetur. Cras iaculis ultricies sem, id volutpat libero tempor quis. Maecenas sagittis, tellus sit amet aliquet laoreet, orci ante viverra justo, id venenatis nisl diam vitae lectus. Donec in interdum nisl. Proin accumsan massa vitae felis elementum, eget volutpat sem aliquet. Sed erat ligula, rhoncus vitae ipsum at, tristique tincidunt leo. In id est non erat interdum ultrices at et velit. Sed non tortor euismod, tempor velit quis, volutpat eros. Vivamus tristique efficitur felis at sodales. Pellentesque posuere rutrum suscipit. Sed convallis elit at nibh maximus luctus. Duis congue risus ante, sed dignissim arcu aliquam sed. Nullam porta ex nibh, ut convallis lectus efficitur nec. Integer lacus dui, fermentum ac sollicitudin vel, luctus et nulla.


</div>
4个回答
3
您链接的答案应该适用于您： https://dev59.com/TXjZa4cB1Zd3GeqPZQ_Q#25041833 但是，不要使用昂贵的.find()，而是将您的ckeditor实例放入数组中，然后循环遍历该数组，使用快速的document.getElementsByClassName('ckeditor');或类似方法访问您的元素。
1
能否提供一个可行的例子？你可以以这个无法工作的jsfiddle为起点。https://jsfiddle.net/pteryvk3/6/ 如果你能提供一个可行的例子，很可能会给你奖励。 - cytsunny
2
有点棘手，但我认为这个解决方案适合您： https://jsfiddle.net/yfa5pjtx/1/ 请注意，为了正确定位工具栏，我使用了jquery-ui库。虽然可以不用它进行定位计算，但使用jquery-ui要简单得多。
以下是能为您实现神奇效果的函数：
function repositionCKEditorToolbar() {
    // If we don't have any active instance of CKEDITOR - return
    if (!CKEDITOR.currentInstance) {
        return;
    }
    // Save the elements we need to work with
    currentActiveEditor = $(CKEDITOR.currentInstance.element.$)
    currentToolbar = $('#cke_' + currentActiveEditor.attr('id'))

    // Save the heights we will need
    toolbar_height = currentToolbar.height()
    parent_height = currentActiveEditor.parent().outerHeight(true)

    if (currentActiveEditor.position().top > parent_height) {
        // In case the toolbar is "out" of the container we should hide it.
        // It can happen because the toolbar is placed (in the DOM) outside the container.
        currentToolbar.css({top: '-1000px'})
    } else if (currentActiveEditor.position().top > toolbar_height) {
        // In case we have enough space to position the toolbar above the editor
        currentToolbar.position({my: "left bottom", at: "left top", of: currentActiveEditor, collision: "none none"})
    } else {
        if (parent_height - currentActiveEditor.height() - currentActiveEditor.position().top > toolbar_height) {
            // Only if have enough space under the editor and that area is visible - put the toolbar there.
            currentToolbar.position({my: "left top", at: "left bottom", of: currentActiveEditor, collision: "none none"})
        }
    }
}
$('#container').on('scroll', function() {
    // Call the repositioning function on each scroll of the container
    repositionCKEditorToolbar();
});

更新

这里是相同的代码，但不需要JQuery-UI库的要求： 请注意新的absolutePositionFromTop函数，它负责我们需要从jquery-ui lib中获得的功能。

function absolutePositionFromTop(el) {
    fromTop = 0;
    while ($(el)[0] != $('body')[0]) {
        fromTop = fromTop + $(el).position().top
        el = $(el).parent()
    }
    return fromTop;
}

function repositionCKEditorToolbar() {
    // If we don't have any active instance of CKEDITOR - return
    if (!CKEDITOR.currentInstance) {
        return;
    }
    // Save the elements we need to work with
    currentActiveEditor = $(CKEDITOR.currentInstance.element.$)
    currentToolbar = $('#cke_' + currentActiveEditor.attr('id'))

    // Save the heights we will need
    toolbar_height = currentToolbar.height()
    parent_height = currentActiveEditor.parent().outerHeight(true)

    if (currentActiveEditor.position().top > parent_height) {
        // In case the toolbar is "out" of the container we should hide it.
        // It can happen because the toolbar is placed (in the DOM) outside the container.
        currentToolbar.css({top: '-1000px'})
    } else if (currentActiveEditor.position().top > toolbar_height) {
        // In case we have enough space to position the toolbar above the editor
        newTop = absolutePositionFromTop(currentActiveEditor) - currentToolbar.height()
        currentToolbar.css({top : newTop + 'px'});
    } else {
        if (parent_height - currentActiveEditor.height() - currentActiveEditor.position().top > toolbar_height) {
            // Only if have enough space under the editor and that area is visible - put the toolbar there.
            newTop = absolutePositionFromTop(currentActiveEditor) + currentActiveEditor.height()
            currentToolbar.css({top : newTop + 'px'});
        }
    }
}
$('#container').on('scroll', function(ev) {
    // Call the repositioning function on each scroll of the container
    repositionCKEditorToolbar();
});

还有一个可以工作的jsfiddle示例。

好的。如果几天后没有更好的答案，或者您现在提供一个不使用jquery-ui的版本，我会发放奖励并将其标记为正确答案。 - cytsunny
从4.4.3版本开始，这个答案也会有所帮助：http://stackoverflow.com/a/24805844/2629396（一行代码）。 - Michiel D
0

https://jsfiddle.net/fxrgcauL/embedded/result/

function isScrolledOutOfView(container, elem) {
  var $elem = $(elem);
  var $container = $(container);

  var docViewTop = $container.scrollTop();
  var docViewBottom = docViewTop + $container.height();

  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();

  return elemTop <= (docViewTop - $container.height());
}
$('#container').on('scroll', function(ev) {
  var container = this,
    currentEditor = CKEDITOR.currentInstance;
  if (typeof(currentEditor) != "undefined" && currentEditor != null) {
    if (isScrolledOutOfView(container, $('#' + currentEditor.element.$.id))) {
      currentEditor.fire('blur');
      $('#' + currentEditor.element.$.id).trigger('blur');
    }
  }
})
这只是在div滚动出屏幕时使编辑框消失，但我想要的是编辑框与div一起滚动，就像官方示例中所示。 - cytsunny
我不确定我理解了。我看不到工具箱随它一起滚动。您能否前往recordit.co并创建视频，以便我可以看看您的意思是什么？这可能是因为您的分辨率不同而导致外观不同。 - jnoreiga
-1

简短而简单的编写 CSS 覆盖类

.cke_contents {
 overflow-y: scroll;
}

如果所有债权人都需要滚动，则使用滚动。否则，获取特定ID以覆盖与上述相同。这将为您的内容提供滚动。
附注：使用检查元素来检查您的类。可能类名不同。
我觉得你没有理解我的问题。当你点击editablecontent div时，会出现一个工具箱。我想要的是，当你滚动div时，工具箱也跟着移动。（就像官方示例中的操作一样） - cytsunny
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接