如何使Grapesjs使用Bootstrap 4轮播？

问题描述

我已经使用grapesjs成功构建了一个小小的拖放生成器。效果很好。我面临的问题是在构建器内拖动引导轮播时。轮播正常工作在预期的页面上。但是在框架内时，仅显示第一个图像，并且我无法使用控件从一个图像切换到另一个图像。我已经研究过lory plugin，但我很希望能够使用引导程序来做到这一点。有任何grapesjs专家可以提供帮助吗？

在Codepen上查看我的构建器： https://codepen.io/hellomev/pen/RwRaNpZ

要复制：打开块。然后将旋转木马之一拖放到构建器中。

grapejs

function customPlugin(editor){
    //slide1
    editor.BlockManager.add('slide1',{
    category : 'Carousel',label: '<h1><i class="far fa-play-circle fa-lg"></i></h1> Slides only',content : '<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg"> </div> </div> </div>'
    });
    //slide2
    editor.BlockManager.add('slide2',label: '<h1><i class="far fa-play-circle fa-lg"></i></h1> Slides With controls',content : '<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">PrevIoUs</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>'
    });
    
    }
    
    
     var editor = grapesjs.init({
    container : '#gjs_container',storageManager: {
    type: 'remote',autosave: true,// Store data automatically
    autoload: true,// Autoload stored data on init
    stepsBeforeSave: 1,urlStore: 'queries/save_webpage.PHP',urlLoad: 'queries/load_webpage.PHP',// For custom parameters/headers on requests
    params: { _some_token: '' },headers: { Authorization: 'Basic' },},plugins: [
    customPlugin
    ],pluginsOpts: {},canvas: {
    styles: [
    'https://use.fontawesome.com/releases/v5.8.2/css/all.css','https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap','https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css','https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css',],scripts: [
    'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js','https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js','https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js',}
    });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

grapesjs javascript