全网只此一篇

引入sweetalert2和ckeditor的js、css

<script src="/static/sweetalert2/js/sweetalert2.min.js"></script>
<script src="/static/sweetalert2/js/sweetalert2.all.min.js"></script>
<link rel="stylesheet" href="/static/sweetalert2/css/sweetalert2.css">
<link rel="stylesheet" href="/static/sweetalert2/css/sweetalert2.min.css">
<script src="/static/ckeditor4/ckeditor.js"></script>

<script>
    CKEDITOR.replace( 'ceditor',{
        customConfig: '/static/ckeditor4/config.js',
    });
    function reply() {
        var replyObj;
        var textValue;
        swal({
            showCancelButton: true,
            confirmButtonColor: "#f5ab35",
            confirmButtonText: "Submit",
            cancelButtonText: "Cancel",
            width: 500,
        }).then(function(isConfirm){
            if (isConfirm) {
                alert(textValue)
            } else {
                alert("offk")
            }
        });
        replyObj = CKEDITOR.replace( 'swal2-validation-message',{
            customConfig: '/static/ckeditor4/config.js',
        });

        replyObj.on( 'change', function( event ) {
            textValue = this.getData();
            console.log(textValue)
        });

    }
</script>

根据id定位div，然后初始化ckeditor，调用swal的function函数触发点击确定的事件

我这里是改造的SweetAlert2中的文本输入框，原始的如下

const { value: text } = await Swal.fire({
  input: 'textarea',
  inputPlaceholder: 'Type your message here...',
  inputAttributes: {
    'aria-label': 'Type your message here'
  },
  showCancelButton: true
})

if (text) {
  Swal.fire(text)
}

因为原来的弹框没有id，这样CKEditor无法定位元素，正好在控制台查看的时候，发现弹框里有一个id="swal2-validation-message"可以用

参考链接

SweetAlert2

CKEditor