如何将Bootstrap旋转木马添加到Magento页面？

Question

我在我的Magento网站的主页上创建了Boostrap轮播。尽管我在旋转木马控件方面遇到了问题。

当我将它们输入到Magento主页的HTML编辑器中时，控件消失。

这是我进入内容的HTML编辑器：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item active"><img src="{{skin url='images/slider/2.jpg'}}" alt="" /></div> 
    <div class="item"><img src={{skin url='images/slider/3.jpg'}} alt="" /></div> 
    <div class="item"><img src={{skin url='images/slider/4.jpg'}} alt="" /></div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> 

这是它保存为：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"> 
<li class="active" data-target="#carousel-example-generic" data-slide-to="0"></li> 
<li data-target="#carousel-example-generic" data-slide-to="1"></li> 
<li data-target="#carousel-example-generic" data-slide-to="2"></li> 
</ol><!-- Wrapper for slides --> 
<div class="carousel-inner"> 
<div class="item active"><img src="..." alt="" /></div> 
<div class="item"><img src="..." alt="" /></div> 
<div class="item"><img src="..." alt="" /></div> 
</div> 
<!-- Controls --></div> 

我已经采取了实像SRC的 - 但那些得到转换正确并在我的网站上显示旋转木马内的图像。但是，正如你所看到的，这些控件会消失。

有没有办法解决这个问题？或者其他任何东西我可以添加以保持控件在那里？

Answer 1

我觉得你在'show editor'和'hide editor'之间存在问题。

如果您正在粘贴HTML，请确保编辑器为隐藏。

如果将代码粘贴到隐藏的编辑器中，然后显示编辑器，然后切换回隐藏状态，则可以看到编辑器更改您的代码。你会看到你的控件消失了。

隐藏编辑器，粘贴HTML，保存页面，并隐藏'编辑器隐藏'。

这是因为“显示/隐藏”的真正含义“的文本编辑和所见即所得的HTML编辑之间开关，适用于一些HTML过滤，以尽可能尝试在两种模式之间交换纠正错误”。

任何在WordPress中使用过视觉与文字编辑器的人都会熟悉这个问题。 WordPress和Magento都使用TinyMCE编辑器（一个出色的编辑器，HTML WYSIWYG不易编码，但我也不认为任何应用程序都使用最新版本）。

我怀疑过滤发生，因为您的锚标记中没有数据。