How to use multiple Textarea with CKEditor 5
In this tutorial in CKEditor 5 in multiple Textarea in one file in how to use. Here, CKEditor 5 in is used a Textarea box so in id element is different-different provided so it works.
Also read: How to image upload in CKEditor using Laravel?
querySelector() is the primary component inside the record that coordinates the predefined selector, or gathering of selectors.
how to use multiple textarea with CKEditor 5
<html lang="en">
<head>
<title>How to use multiple textarea with CKEditor 5</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.2/classic/ckeditor.js"></script>
</head>
<body>
<div class="container text-center">
<h1>How to use multiple textarea with CKEditor 5</h1>
<form id="ckeditorForm" method="post">
<textarea name="content0" class="ck_editor_txt" id="ckeditor0">How to use multiple textarea with CKEditor 5</textarea><br>
<textarea name="content1" class="ck_editor_txt" id="ckeditor1">How to use multiple textarea with CKEditor 5</textarea><br>
<textarea name="content2" class="ck_editor_txt" id="ckeditor2">How to use multiple textarea with CKEditor 5</textarea>
</form>
</div>
<script>
var allEditors = document.querySelectorAll('.ck_editor_txt');
for (var i = 0; i < allEditors.length; ++i) {
ClassicEditor.create(allEditors[i]);
}
</script>
</body>
</html>Demo: Multiple textarea with CKEditor 5
Also Read: How to use CKEditor 5 using javascript?
Is it possible to retrieve data with getData() method when doing this? Thanks!
I think this tutorial is useful:
Getting and Saving Data in CKEditor