How to use Multiple textareas with CKEditor 5 - Javascript
The given code is an HTML document that includes a textarea element for a rich text editor, specifically using the CKEditor library. Let's go through the code and explain each part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>This section defines the HTML document type and specifies the language (English) and character encoding (UTF-8).
<body>
<style>
.ck-editor__editable[role="textbox"] {
/* editing area */
min-height: 200px;
}
</style>This block contains some CSS styling to set a minimum height of 200 pixels for the CKEditor editing area.
<textarea class="crud-richtext" name="text_1"></textarea>
<!-- <textarea class="crud-richtext" name="text_2"></textarea> -->These lines define textarea elements with the class "crud-richtext" and names "text_1" and "text_2". The second textarea is commented out in this code snippet.
<script src="https://cdn.ckeditor.com/ckeditor5/38.0.1/super-build/ckeditor.js"></script>This script tag imports the CKEditor library from a CDN (content delivery network) by providing the URL to the CKEditor script file.
<script>
var allEditors = document.querySelectorAll('.crud-richtext');
for (var i = 0; i < allEditors.length; ++i) {
CKEDITOR.ClassicEditor.create(allEditors[i], {
// Configuration options for CKEditor...
});
}
</script>This JavaScript code initializes CKEditor for each textarea element with the class "crud-richtext". It uses the querySelectorAll method to select all elements with the specified class, and then loops over them, creating a CKEditor instance for each element using the create method from the CKEDITOR.ClassicEditor class. Inside the create method, you can find an object with various configuration options for CKEditor, defining its behavior, toolbar, plugins, and more.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
.ck-editor__editable[role="textbox"] {
/* editing area */
min-height: 200px;
}
</style>
<textarea class="crud-richtext" name="text_1"></textarea>
<!-- <textarea class="crud-richtext" name="text_2"></textarea> -->
<script src="https://cdn.ckeditor.com/ckeditor5/38.0.1/super-build/ckeditor.js"></script>
<script>
var allEditors = document.querySelectorAll('.crud-richtext');
for (var i = 0; i < allEditors.length; ++i) {
CKEDITOR.ClassicEditor.create(allEditors[i], {
// ckfinder: {
// uploadUrl: '{{route('admin.ck_editor_image_upload', ['_token' => csrf_token() ])}}'
// },
toolbar: {
items: [
'exportPDF', 'exportWord', '|',
'findAndReplace', 'selectAll', '|',
'heading', '|',
'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
'bulletedList', 'numberedList', 'todoList', '|',
'outdent', 'indent', '|',
'undo', 'redo', '|', 'sourceEditing',
'-',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
'alignment', '|',
'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
'specialCharacters', 'horizontalLine', 'pageBreak', '|',
'textPartLanguage'
],
shouldNotGroupWhenFull: true
},
list: {
properties: {
styles: true,
startIndex: true,
reversed: true
}
},
heading: {
options: [{
model: 'paragraph',
title: 'Paragraph',
class: 'ck-heading_paragraph'
},
{
model: 'heading1',
view: 'h1',
title: 'Heading 1',
class: 'ck-heading_heading1'
},
{
model: 'heading2',
view: 'h2',
title: 'Heading 2',
class: 'ck-heading_heading2'
},
{
model: 'heading3',
view: 'h3',
title: 'Heading 3',
class: 'ck-heading_heading3'
},
{
model: 'heading4',
view: 'h4',
title: 'Heading 4',
class: 'ck-heading_heading4'
},
{
model: 'heading5',
view: 'h5',
title: 'Heading 5',
class: 'ck-heading_heading5'
},
{
model: 'heading6',
view: 'h6',
title: 'Heading 6',
class: 'ck-heading_heading6'
}
]
},
fontFamily: {
options: [
'default',
'Arial, Helvetica, sans-serif',
'Courier New, Courier, monospace',
'Georgia, serif',
'Lucida Sans Unicode, Lucida Grande, sans-serif',
'Tahoma, Geneva, sans-serif',
'Times New Roman, Times, serif',
'Trebuchet MS, Helvetica, sans-serif',
'Verdana, Geneva, sans-serif'
],
supportAllValues: true
},
fontSize: {
options: [10, 12, 14, 'default', 18, 20, 22],
supportAllValues: true
},
htmlSupport: {
allow: [{
name: /.*/,
attributes: true,
classes: true,
styles: true
}]
},
htmlEmbed: {
showPreviews: true
},
link: {
decorators: {
addTargetToExternalLinks: true,
defaultProtocol: 'https://',
toggleDownloadable: {
mode: 'manual',
label: 'Downloadable',
attributes: {
download: 'file'
}
}
}
},
mention: {
feeds: [{
marker: '@',
feed: [
'@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
'@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
'@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
'@sugar', '@sweet', '@topping', '@wafer'
],
minimumCharacters: 1
}]
},
removePlugins: [
'CKBox',
'CKFinder',
'EasyImage',
'RealTimeCollaborativeComments',
'RealTimeCollaborativeTrackChanges',
'RealTimeCollaborativeRevisionHistory',
'PresenceList',
'Comments',
'TrackChanges',
'TrackChangesData',
'RevisionHistory',
'Pagination',
'WProofreader',
'MathType',
'SlashCommand',
'Template',
'DocumentOutline',
'FormatPainter',
'TableOfContents'
]
});
}
// crud-richtext end
</script>
</body>
</html>
Leave A Comment