CKEditor 5 classic editor build customized by DNA (DeNiApps.COM) - With Unsplash, Code Block and more.

The DNA classic editor build for CKEditor 5 was created on the top of official CKEditor 5 classic editor build v38.1.1. It's a CKEditor 5 Custom Build for Developer's Blog, including many features like:

- Search up to five pages of results from Unsplash - scrolling down to see more :-) (since V1.0.17)
- Allow to upload image from local with Base64UploadAdapter as default (since V1.0.11)
- Auto assigned id attribute to <code> in Code Block (since V1.0.10)
- Allow to add custom css to <table> and <img> (since V1.0.9)
- Allow to add image from unsplash (since V1.0.6)
- Allow to add <code> for inline Code Block (since V1.0.5)
- Allow to insert Code Block
- Allow to insert an image by url

DEMO

SEE DEMO & EXAMPLE REACT COMPONENT

How-Tos

- Customize CKEditor5 Toolbar
- Syntax Highlighting with Code Block
- Open External Links in New Tab
- How to add Custom CSS Class Names <table> and <img>

Screenshots

!CKEditor 5 classic editor build screenshot - add an image from Unsplash 1

!CKEditor 5 classic editor build screenshot - add an image from Unsplash 2

!CKEditor 5 classic editor build screenshot - add code block

!CKEditor 5 classic editor build screenshot - add inline code

Quick start

First, install the build from npm:

``bash
npm install --save ckeditor5-build-classic-dna
`

Use CKEditor as React component:

`js
import React, { Component } from "react";
import PropTypes from "prop-types";
import { CKEditor } from "@ckeditor/ckeditor5-react"; //starting from ckeditor5-react v3, we should use { CKEditor }
// import CKEditor from "@ckeditor/ckeditor5-react"; // for ckeditor5-react v2
import ClassicEditor from "ckeditor5-build-classic-dna";

class CKEditor5 extends Component {
static get propTypes() {
return {
value: PropTypes.string,
onChange: PropTypes.func,
};
}

// NOTE: You can customize toolbar using "config", here are avaliable Toolbar Items:
// "heading",
// "bold",
// "italic",
// "link",
// "bulletedList",
// "numberedList",
// "indent",
// "outdent",
// "insertImage",
// “insertImageFromUnsplash”,
// "code",
// "codeBlock",
// "blockQuote",
// "insertTable",
// "mediaEmbed",
// "undo",
// "redo"

// See how to customize toolbar at: https://deniapps.com/blog/customize-ckeditor5-toolbar

// You can add custom css to

& now, see the details at:
// https://deniapps.com/blog/how-to-add-custom-css-classes-to-table-or-img-in-ckeditor

render() {
return (
editor={ClassicEditor}
config={{
table: {
customClass: ["ui", "table", "celled"], // Important!!! need to be array
},
image: {
customClass: ["ui", "fluid", "image"], // Use whatever class names defined in your theme
},
toolbar: [
"heading",
"|",
"bold",
"italic",
"link",
"bulletedList",
"numberedList",
"|",
"indent",
"outdent",
"|",
"codeBlock",
"blockQuote",
"insertTable",
"mediaEmbed",
"undo",
"redo",
],
data={this.props.value}
onInit={(editor) => {
// You can store the "editor" and use when it is needed.
console.log("Editor is ready to use!", editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
this.props.onChange(data);
}}
/>
);
}
}
export default CKEditor5;
`

Or use it in your website:

`html





`

Or in your JavaScript application:

`js
import ClassicEditor from "ckeditor5-build-classic-dna";

// Or using the CommonJS version:
// const ClassicEditor = require( 'ckeditor5-build-classic-dna' );

ClassicEditor.create(document.querySelector("#editor"))
.then((editor) => {
window.editor = editor;
})
.catch((error) => {
console.error("There was a problem initializing the editor.", error);
});
`

Or in React With SSR (for example: NextJS)

`js
import { useState } from "react";
// For SSR, you cannot import CKEditor directly since it needs client functions to run.
// import CKEditor from "components/Common/CKEditor";
import dynamic from "next/dynamic";
const CKEditor = dynamic(() => import("components/Common/CKEditor"), {
ssr: false,
});

const CKEditorDemo = () => {
const [content, setContent] = useState("");
return ;
};

export default CKEditorDemo;
`

License

Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md` file or https://ckeditor.com/legal/ckeditor-oss-license.