欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

SweetAlert2结合CKEditor的输入弹框实践

程序员文章站 2022-03-30 21:14:51
全网只此一篇引入sweetalert2和ckeditor的js、css

全网只此一篇

引入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>

js 

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

SweetAlert2结合CKEditor的输入弹框实践

效果如图所示

SweetAlert2结合CKEditor的输入弹框实践

参考链接

SweetAlert2

CKEditor

本文地址:https://blog.csdn.net/ssjdoudou/article/details/107288028