所以我有一个 CKeditor 5 文本区域，当我单击提交按钮时，它会运行获取文本区域，并且为了这个示例，将其作为更改而触发。然而问题是，它会在加载时触发编辑器中的内容，而不是我所做的更改。
我认为在收集变量之前我需要告诉文本编辑器刷新或执行其他操作？
有谁知道我如何解决这个问题，这是我的代码
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<title>OpsPal | Tasks</title>
<link rel="icon" type="image/x-icon" href="../images/favicon.ico?refresh=<?php echo $refresh ?>"/>
<link href="../assets<?php echo $L ?>/css/loader.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<script src="../assets<?php echo $L ?>/js/loader.js?refresh=<?php echo $refresh ?>"></script>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link href="../bootstrap<?php echo $L ?>/css/bootstrap.min.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<link href="../assets<?php echo $L ?>/css/main.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<link href="../assets<?php echo $L ?>/css/structure.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<link href="../plugins<?php echo $L ?>/perfect-scrollbar/perfect-scrollbar.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../plugins<?php echo $L ?>/bootstrap-select/bootstrap-select.min.css?refresh=<?php echo $refresh ?>">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css?refresh=<?php echo $refresh ?>">
<link rel="stylesheet" href="../assets/css/formval/screen.css?refresh=<?php echo $refresh ?>">
<!--JAVASCRIPT -->
<script src="../assets/js/libs/jquery-3.1.1.min.js?refresh=<?php echo $refresh ?>"></script>
</head>
<body>
<!-- BEGIN CONTENT PART -->
<div id="content" class="main-content">
<div class="layout-px-spacing">
<div class="container-responsive">
<div class="row layout-top-spacing">
<div class="col-xl-8 col-lg-10 col-md-10 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area br-6">
<form id="newtask" method="post" autocomplete="off" >
<label for="formGroupExampleInput">Note</label>
<div class="centered" >
<div class="row row-editor">
<div class="editor-container" style="width: 100%; margin-left: 10px; margin-right: 10px;">
<textarea required class="editor form-control" name="note" id="note" type="text">Org Text</textarea>
</div>
</div></div>
<input name="submit" type="submit" value="submit" id="submit" class="btn btn-primary">
</form>
</div></div></div></div></div>
<?php include_once("../footer.php"); ?>
</div></div></div>
<!-- END MAIN CONTAINER -->
<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
<script src="../bootstrap/js/popper.min.js?refresh=<?php echo $refresh ?>"></script>
<script src="../bootstrap/js/bootstrap.min.js?refresh=<?php echo $refresh ?>"></script>
<script src="../plugins/perfect-scrollbar/perfect-scrollbar.min.js?refresh=<?php echo $refresh ?>"></script>
<script src="../assets/js/app.js?refresh=<?php echo $refresh ?>"></script>
<script src="../plugins/bootstrap-select/bootstrap-select.min.js?refresh=<?php echo $refresh ?>"></script>
<script src="../scripts/jquery.validate.js?refresh=<?php echo $refresh ?>"></script>
<script>
///this validates the formon the submit handler if successful it switches the button over//
$('#newpro').validate({
submitHandler: function(){
$("#save").hide();
$("#savedis").show();
$(form).ajaxSubmit();
}
});
</script>
<script>
$(document).ready(function() {
App.init();
});
</script>
<script src="../assets/js/custom.js?refresh=<?php echo $refresh ?>"></script>
<script src="../plugins/ckeditor/build/ckeditor.js?refresh=<?php echo $refresh ?>"></script>
<script src="../plugins/ckeditor/ckfinder/ckfinder.js?refresh=<?php echo $refresh ?>"></script>
<?php //////adds a dark theme to ckeditor////
if($theme=='D'){
echo "<link rel='stylesheet' href='../plugins/ckeditor/styles/dark.css?refresh=$refresh)' type='text/css'>";
}
else{
echo "<link rel='stylesheet' href='../plugins/ckeditor/styles/light.css?refresh=$refresh)' type='text/css'>";
}
?>
<script>
const watchdog = new CKSource.EditorWatchdog();
window.watchdog = watchdog;
watchdog.setCreator( ( element, config ) => {
return CKSource.Editor
.create( element, config )
.then( editor => {
return editor;
} )
} );
watchdog.setDestructor( editor => {
return editor.destroy();
} );
watchdog.on( 'error', handleError );
watchdog
.create( document.querySelector( '.editor' ), {
fontSize: {
options: [
'default',
8,
10,
12,
14,
16,
18,
20
]
},
ckfinder: {
uploadUrl: '../plugins/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
},
mediaEmbed: {
previewsInData: true
},
toolbar: {
items: [
'undo',
'bold',
'italic',
'underline',
'fontSize',
'alignment',
'bulletedList',
'numberedList',
'horizontalLine',
'|',
'link',
'CKFinder',
'mediaEmbed',
'insertTable',
'imageInsert',
'findAndReplace',
'highlight',
'heading',
//'sourceEditing',
],
},
language: 'en-gb',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:inline',
'imageStyle:block',
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
licenseKey: '',
} )
.catch( handleError );
function handleError( error ) {
console.error( 'Oops, something went wrong!' );
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
console.warn( 'Build id: 8kp2t5e90ll2-hyf8iacvn125' );
console.error( error );
}
</script>
<script>
$('#submit').on('click',function(){
var note= $('#note').val();
alert(note);
})
</script>
</body>
</html>
1、将提交脚本按钮移至第一个脚本标签本身。无需定义另一个。
2，您的变量名为
watchdogeditorconsole.log(watchdog.getData());在这里，这个小提琴会有所帮助：JSFiddle 如果您在开始时提交，它将输出“旧内容”，然后如果您更改文本并提交，它将输出“新内容”。您可以在 Fiddle 的控制台中看到输出。
请帮忙，其中 data val()（看门狗生成 CK 生成器）
<form id="form" method="post" action="">
<textarea class="editor">ABC</textarea>
<input name="submit" type="submit" value="submit" id="submit" class="btn btn-primary">
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="../build/ckeditor.js"></script>
<script>
const watchdog = new CKSource.EditorWatchdog();
window.watchdog = watchdog;
watchdog.setCreator( ( element, config ) => {
return CKSource.Editor
.create( element, config )
.then( editor => {
return editor;
} );
} );
watchdog.setDestructor( editor => {
return editor.destroy();
} );
watchdog.on( 'error', handleSampleError );
watchdog
.create( document.querySelector( '.editor' ), {
// Editor configuration.
} )
.catch( handleSampleError );
function handleSampleError( error ) {
const issueUrl = 'https://github.com/ckeditor/ckeditor5/issues';
const message = [
'Oops, something went wrong!',
`Please, report the following error on ${ issueUrl } with the build id "7m0f53zcxka4-7ot1n042dcu3" and the error stack trace:`
].join( '\n' );
console.error( message );
console.error( error );
}
$('#submit').on('click', function(event) {
event.preventDefault();
console.log(watchdog.getData());
});
</script>