SweetAlert2结合CKEditor的输入弹框实践_JavaScript

全网只此一篇

引入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("cancel")
            }
        });
        replyObj = CKEDITOR.replace( 'swal2-validation-message',{
            customConfig: '/static/ckeditor4/config.js',
        });

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

    }
</script>

config.js

/**
 * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For complete reference see:
	// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

	// The toolbar groups arrangement, optimized for two toolbar rows.
	config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'about' }
	];

	// Remove some buttons provided by the standard plugins, which are
	// not needed in the Standard(s) toolbar.
	config.removeButtons = 'Underline,Subscript,Superscript';

	// Set the most common block elements.
	config.format_tags = 'p;h1;h2;h3;pre';

	// Simplify the dialog windows.
	config.removeDialogTabs = 'image:advanced;link:advanced';

	config.language = 'en';

	config.extraPlugin = "emoji";
};

根据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"可以用