javascript - CKeditor 5文本区域未更新
问题描述
所以我有一个 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,您的变量名为watchdog
,而不是editor
。因此,在您移动按钮提交后,在其中执行:console.log(watchdog.getData());
。
在这里,这个小提琴会有所帮助:JSFiddle 如果您在开始时提交,它将输出“旧内容”,然后如果您更改文本并提交,它将输出“新内容”。您可以在 Fiddle 的控制台中看到输出。
推荐阅读
- php - Laravel 批准的类别在同一张表中
- mysql - 如何从另一个表加入计数(*)
- angular - 角度测试 - 如果包含在 whenStable 中,则预计不会出现
- angular - Angular 材质:弹出窗口:允许在原始窗口中单击并且不要灰显
- mysql - 将 MySQL 工作台连接到 MS ODBC
- http - Flutter:构建内部的 setState
- .net - 如何使用 NuGet 打包单个 EXE
- windows - 如何提交对 Windows 容器的更改,包括 PATH 等环境变量?
- r - r data.table 如何从不同的 data.table 进行查找
- sql - 带外连接的长查询,