Question

我已经在Sitecore中部署了我的第一页。但它在内容编辑器预览模式下无法完美呈现。

原创html：

有一个导航菜单和下面的横幅。在它们后面是一个白色透明的覆盖物＆amp;叠加层后面是涂鸦背景图片。

从体验编辑器查看：

设置图标偏移了。白色叠加层现在位于Sitecore菜单上方，阻止了编辑。

浏览器控制台出错：
  未捕获的TypeError：element.dispatchEvent是   不是函数 - prototype.js：5734
  未捕获的TypeError：   element.attachEvent不是函数 - prototype.js：5653

在内容编辑器中查看：

它就像平板电脑一样呈现，因为您看到菜单已移至图标。据我所知，这是因为预览面板的尺寸。但是，如果是这种情况，作者将如何编辑/查看正确的设计。

Prototype.js不是网站使用的文件。所以，它必须来自Sitecore的。

我猜，某些CSS道具没有受到尊重（比如位置，变换）。

这是一个错误。如何解决这个问题。我已经检查过不同的浏览器（IE，chrome和firefox）。它是一样的

Answer 1

看起来你遇到了与prototype.js的冲突。 Sitecore在体验编辑器中使用它。

如果您在自己的网站中使用jQuery，那么有一篇关于此内容的kb文章：https://kb.sitecore.net/articles/286042

要解决此问题，您需要在无冲突模式下运行jQuery。有几种方法可以做到这一点。这是一个简单的例子：

<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>

var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {
    $j( "div" ).hide();
});

// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
    var mainDiv = $( "main" );
}

</script>

您可以在jQuery网站上找到更多信息：http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

您还需要小心CSS - 不要将元素绝对定位到浏览器的顶部，始终确保它们相对于容器，以便可以正确添加和定位Sitecore EE DOM元素。 / p>

Sitecore

1 个答案: