Nerdy Poly Millionaires

    ckeditor5-build-classic-dna

    1.3.2 • Public • Published

    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 v33.0.0. 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.

    Install

    npm i ckeditor5-build-classic-dna

    Homepage

    deniapps.com

    DownloadsWeekly Downloads

    135

    Version

    1.3.2

    License

    GPL-2.0-or-later

    Unpacked Size

    1.2 MB

    Total Files

    67

    Last publish

    Collaborators

    • deniapps