SweetAlert2结合CKEditor的输入弹框实践
程序员文章站
2022-07-02 23:04:41
全网只此一篇引入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"可以用
效果如图所示
参考链接
本文地址:https://blog.csdn.net/ssjdoudou/article/details/107288028
上一篇: 10年后智能机器人将普及进入每一个家庭
下一篇: VSCode编辑器和开发环境搭建