Package Exports

ckeditor5-build-classic-dna
ckeditor5-build-classic-dna/build/ckeditor.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ckeditor5-build-classic-dna) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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:

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

Use CKEditor as React component:

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 <table> & <img> now, see the details at:
// https://deniapps.com/blog/how-to-add-custom-css-classes-to-table-or-img-in-ckeditor

  render() {
    return (
      <CKEditor
        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:

<div id="editor">
  <p>This is the editor content.</p>
</div>
<script src="./node_modules/ckeditor5-build-classic-dna/build/ckeditor.js"></script>
<script>
  ClassicEditor.create(document.querySelector("#editor"))
    .then((editor) => {
      window.editor = editor;
    })
    .catch((error) => {
      console.error("There was a problem initializing the editor.", error);
    });
</script>

Or in your JavaScript application:

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)

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 <CKEditor value={content} onChange={setContent} />;
};

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.