Full Rich Featured CK Text Editor CKEditor 5 2024
In This Blog, We will See How To Integrate Text Editor In Html Page. We use HTML, CSS, JS To render Text Editor in html Page.
Text Editor Are One of The Useful Tool in Website Backend or Website Admin
Lets See The Code For Rich Text Editor
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Full Featured CKEditor 5</title>
<style>
#container {
width: 1000px;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="container">
<div id="editor"></div>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/35.3.2/super-build/ckeditor.js"></script>
<script>
CKEDITOR.ClassicEditor.create(document.getElementById("editor"), {
toolbar: {
items: [
"exportPDF",
"exportWord",
"|",
"findAndReplace",
"selectAll",
"|",
"heading",
"|",
"bold",
"italic",
"strikethrough",
"underline",
"code",
"subscript",
"superscript",
"removeFormat",
"|",
"bulletedList",
"numberedList",
"todoList",
"|",
"outdent",
"indent",
"|",
"undo",
"redo",
"-",
"fontSize",
"fontFamily",
"fontColor",
"fontBackgroundColor",
"highlight",
"|",
"alignment",
"|",
"link",
"insertImage",
"blockQuote",
"insertTable",
"mediaEmbed",
"codeBlock",
"htmlEmbed",
"|",
"specialCharacters",
"horizontalLine",
"pageBreak",
"|",
"textPartLanguage",
"|",
"sourceEditing",
],
shouldNotGroupWhenFull: true,
},
language: "es",
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",
},
],
},
placeholder: "Welcome to CKEditor 5!",
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",
],
});
</script>
</body>
</html>
Demo Links Are Below Of Page CKEditor , Rich Text Editor
