关键词：
【中文标题】CKeditor 5文本区域未更新【英文标题】：CKeditor 5 text area not updating 【发布时间】：2021-12-22 07:17:43 【问题描述】：所以我有一个 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>
【问题讨论】：
尝试在编辑器实例上使用.getData() 而不是.val()。 ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/…
@SiddharthBhansali 感谢您尝试帮助我，我已尝试将其更改为这个，但我什么也没得到$('#submit').on('click',function() const note = editor.getData(); alert(note); ) 这让我发疯！
或者如果我这样做了，我只是没有从警报中得到任何回报？ $('#submit').on('click',function() var note = $('#note').getData(); alert(note); )
第二个不起作用，因为 .getData() 在 jQuery 元素实例上不可用。在第一个中，您能否控制台记录editor 并查看输出是什么？
@SiddharthBhansali 感谢您帮助我。这是我从控制台返回的，我不明白这意味着什么。 . . . . . . test.php?note=Org+Text&submit=submit:214 Uncaught TypeError: Cannot read properties of undefined (reading 'getData') at HTMLInputElement. (test.php?note=
Org+Text&submit=submit:214) 在 HTMLInputElement.dispatch (jquery-3.1.1.min.js?refresh=:3) 在 HTMLInputElement.q.handle (jquery-3.1.1.min.js ?refresh=:3)
【参考方案1】：1，将按钮提交脚本移动到第一个脚本标签本身。无需另外定义。
2，您的变量名为watchdog，而不是editor。因此，在您移动按钮提交后，在其中执行：console.log(watchdog.getData());。
在这里，这个小提琴会有所帮助：JSFiddle 如果你一开始提交，它会输出'旧内容'，然后如果你改变文本并提交，它会输出'新内容'。您可以在 Fiddle 的控制台中看到输出。
【讨论】：
ckeditor 更新文本区域
】ckeditor更新文本区域【英文标题】：Ckeditorupdatetextarea【发布时间】：2011-03-1000:38:45【问题描述】：我正在尝试让ckeditor正常工作。显然它没有使用textarea所以提交表单时不会在编辑器中提交文本。因为我使用了多态关联等。我... 查看详情
CKEditor 5 的多个文本区域
】CKEditor5的多个文本区域【英文标题】：MultipletextareaswithCKEditor5【发布时间】：2018-06-1620:32:01【问题描述】：我尝试将CKEditor5设置为多个<textarea>，但只有第一个有效。代码如下：<scriptsrc="https://cdn.ckeditor.com/ckeditor5/1... 查看详情
文本区域消失 - Ckeditor
】文本区域消失-Ckeditor【英文标题】：Thetextareadisappears-Ckeditor【发布时间】：2012-11-2102:07:25【问题描述】：我尝试使用ckeditor但如果我放了例如colorbutton插件，textarea消失。以下是我的尝试：CKEDITOR.replace(\'editor1\',extraPlugins:\'colorbu... 查看详情
CKEditor 5 的设定值
】CKEditor5的设定值【英文标题】：SettingvalueofCKEditor5【发布时间】：2018-11-2510:00:56【问题描述】：我正在我的网站上开发一个功能，用户应该能够使用ckeditor5和textarea编辑他或她自己的主题。textarea放置在模态框内。但是，当我尝... 查看详情
如何为具有相同名称的多个文本区域添加ckeditor
】如何为具有相同名称的多个文本区域添加ckeditor【英文标题】：Howtoaddckeditorformultipletextareawithsamename【发布时间】：2021-12-1021:11:09【问题描述】：<div><textareaclass="input-areaadditional"name="research_projects[]"placeholder="ProjectDetails"sp 查看详情
如何将 CKEditor 添加到 Sonata Admin 后端的文本区域
】如何将CKEditor添加到SonataAdmin后端的文本区域【英文标题】：HowtoaddCKEditortoSonataAdminbackend\'stextareas【发布时间】：2013-12-1416:44:15【问题描述】：我想将CKEditor添加到SonataAdmin后端。现在我只运行CreateBundle，它允许我内联编辑内容... 查看详情
CKEditor 5 和 jQuery 验证错误
】CKEditor5和jQuery验证错误【英文标题】：CKEditor5andjQueryValidationerror【发布时间】：2018-12-3110:32:57【问题描述】：对使用CKEditor非常陌生，我对收到的这个jQuery验证错误感到困惑。我的项目是C#MVC并使用UnobtrusiveJavascript和UnobtrusiveVal... 查看详情
更新文本区域
】更新文本区域【英文标题】：Updatingatextarea【发布时间】：2012-10-2804:32:42【问题描述】：我在更新或“重新绘制”文本区域时遇到问题。我希望在for循环的每个循环中。我尝试了一些方法，例如调用paint();和repaint();函数以及使... 查看详情
VueJs：文本区域输入绑定
...rget.value)">但是在textarea上这不起作用。我正在使用的是CKEditor 查看详情
无法获取更新的文本区域值
】无法获取更新的文本区域值【英文标题】：UnabletogetUpdatedtextareaValue【发布时间】：2011-12-2514:31:59【问题描述】：我有一个问题：我的页面上有一个如下所示的文本区域：<textareaid=\'redactor_content\'name=\'redactor_content\'style=\'width:... 查看详情
更新时如何让文本区域保持滚动到底部
】更新时如何让文本区域保持滚动到底部【英文标题】：Howtohaveatextareatokeepscrolledtothebottomwhenupdated【发布时间】：2011-11-1410:38:41【问题描述】：我的问题在这里有点离题，所以我会尽力解释这一点。我有一个文本区域，其css为#ob... 查看详情
是否可以使用来自 AJAX 调用的数据更新文本区域元素？ [关闭]
】是否可以使用来自AJAX调用的数据更新文本区域元素？[关闭]【英文标题】：Isitpossibletoupdateatextarea-elementwithdatafromanAJAXcall?[closed]【发布时间】：2014-10-0511:47:35【问题描述】：这是我希望附加到文本区域的.ready(function)。希望你能... 查看详情
Angular - 用户输入后无法更新文本区域
】Angular-用户输入后无法更新文本区域【英文标题】：Angular-Cantupdatetextareaafteruserinput【发布时间】：2017-03-2006:44:12【问题描述】：我对Anuglar有疑问。ng-bind一旦用户输入改变了textarea的值，就不会更新它。注意：我使用ng-bind而不... 查看详情
如何更新文本区域的值（ASP.NET Core MVC）
】如何更新文本区域的值（ASP.NETCoreMVC）【英文标题】：Howtoupdatethevalueofatextarea(ASP.NETCoreMVC)【发布时间】：2022-01-0208:32:36【问题描述】：为了简单起见：这是我的服务类：publicclassServiceClasspublicstringRequestget;set;//otherlogicprivatevoidEx... 查看详情
CKEditorType 在 symfony sonata admin 中显示文本区域
】CKEditorType在symfonysonataadmin中显示文本区域【英文标题】：CKEditorTypeshowstextareainsymfonysonataadmin【发布时间】：2021-10-1516:59:27【问题描述】：我在我的symfony项目中使用friendsofsymfony/ckeditor-bundle我按照symfony文档https://symfony.com/doc/curre... 查看详情
使用文本区域中的数据更新 Netsuite 记录中的字段
】使用文本区域中的数据更新Netsuite记录中的字段【英文标题】：UpdatingafieldinaNetsuiterecordwithdatafromatextarea【发布时间】：2019-07-1105:16:28【问题描述】：我已经与SCA合作了一段时间，但在将数据从前端移动到Netsuite后端时，我需要... 查看详情
无法在 Coach BPM 8.5.7 的输出文本区域中放置换行符
】无法在CoachBPM8.5.7的输出文本区域中放置换行符【英文标题】：UnabletoputnewlineinOutputtextareainCoachBPM8.5.7【发布时间】：2017-10-2305:36:05【问题描述】：我有一个与输出文本区域绑定的变量，我试图通过在变量的实现中放入\\n来放置... 查看详情
如何使用 MySQL 在 PHP 中创建不断更新的文本区域？
】如何使用MySQL在PHP中创建不断更新的文本区域？【英文标题】：HowdoIcreateaconstantlyupdatedtextareainPHPusingMySQL?【发布时间】：2014-07-0904:54:32【问题描述】：我的计划是有一个不需要提交按钮来更新它的大文本区域，每次你输入一个... 查看详情