Question

如何在html上使用sortable和inline froalaEditor？

ui sortable https://jqueryui.com/sortable/ 编辑：https://www.froala.com/wysiwyg-editor/examples/inline

我的JS代码：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <img class="" src="./sections/headers/header-logo-slogan-cards/images/logo2-light-big.png" srcset="./sections/headers/header-logo-slogan-cards/images/logo2-light-big@2x.png 2x" class="mb-50" alt="Gumapp">
            <h1 class="mb-40">Innovative solutions and design</h1>
            <div class="spr-option-copy-del aos-init aos-animate" data-aos="stretch-left" data-aos-easing="linear" data-aos-duration="800" data-aos-delay="400" style="height:2px;background-color:#ffffff;box-shadow: 0 0 5px #ffffff;"></div>
            <h3 class="mb-75 mt-40">So, what is the secret of successful template design?<br> First of all, it is its friendliness.</h3>
        </div>
        <div class="col-md-4">
            <div class="card light spr-option-item-img">
                <img src="./sections/headers/header-logo-slogan-cards/images/card-bg-1.jpg" class="card-img spr-option-img-nosettings" alt="">
                <div class="card-img-overlay-bottom">
                    <h3>Technology</h3>
                    <p class="mb-20">Emotions that causes your project in visitor are no less important ticket to success</p>
                    <a class="btn btn-default btn-sm" href="#"><span class="spr-option-textedit-link">Read more</span></a>
                </div>
            </div>
        </div>
    </div>
</div>

我的HTML：

LocalDateTime

当我用上面的JS尝试这种方式时，可以排序无法工作。

非常感谢

Answer 1

我没有测试过代码，但是有一个有根据的猜测。您在容器类上启动编辑器，其中存在行类。检查容器元素，可能行类已经消失，并被编辑器替换。您可能应该在容器周围的另一个div上初始化，或者在另一个上启动froala编辑器。

Answer 2

使用可排序元素时，需要禁用该元素的选择，因此它不再可编辑。最好的方法是使用拖动处理程序，以便可排序和编辑器一起工作。

如何使用sortable和froalaEditor

2 个答案: