Question

我使用owlCarousel 2来显示图片，并使用tinymce 4作为WYSIWIG编辑器。

当我将图像从旋转木马拖动到 FireFox 41.0.2 中的tinyMCE WYSIWIG编辑器时，我遇到了一个奇怪的问题。它不是仅丢弃图像，而是复制包含图像的旋转木马的div。

这是猫头鹰配置

var owl = $("#extracted-images");
owl.owlCarousel({
  items : 4, //10 items above 1000px browser width
  itemsDesktop : [1000,5], //5 items between 1000px and 901px
  itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
  itemsTablet: [600,2], //2 items between 600 and 0;
  itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
  touchDrag : false,
  mouseDrag : false,
});

拖放后

TinyMCE WYSIWIG中的HTML

铬

<p><img src="http://127.0.1.1/wp-content/uploads/2015/10/SXSW-0033.jpg" alt="Sxsw 0033"></p>

火狐

<div style="width: 137px;" class="owl-item">
  <div class="item">
    <div class="image-list-box">
       <div class="doc-img-box">
        <img alt="Sxsw 0033" src="http://127.0.1.1/wp-content/uploads/2015/10/SXSW-0033.jpg">
       </div>
     </div>
  </div>
</div>

检查Firefox中的http://fiddle.tinymce.com/Cifaab/2以获得更多想法。

注意：我没有在轮播图片代码上设置draggable = 'true' 但即使将draggable设置为true，它也不会改变结果。有什么建议吗？

Answer 1

初始化tinyMCE时添加以下配置。

invalid_elements: "div"

在这里，您需要指定在tinyMCE中删除图像时要忽略的所有元素。有关详细信息，请查看文档here

jQuery owlCarousel拖放Firefox问题

1 个答案: