0

我使用owlCarousel 2来显示图像，并使用tinymce 4作为所见即所得的编辑器。

当我将图像从轮播拖到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. 有什么建议么？

4

1 回答 1

2

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

invalid_elements: "div"

在这里，您需要指定在 tinyMCE 中放置图像时要忽略的所有元素。有关更多详细信息，请在此处查看文档

于 2015-11-06T12:50:10.460 回答