Giter VIP home page Giter VIP logo

nextjs-ckeditor5's Introduction

nextjs-ckeditor5

Sample for using CKEditor5 with custom build (additional plugins..) in Next.js

Input

Tutorials

Custom ckeditor-5-build-classic

For example, add the plugin SimpleUploadAdapter into ckeditor-5-build-classic

  • Install the plugin SimpleUploadAdapter
cd ckeditor5-build-classic-custom
npm install


// src/ckeditor.js
...
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';
...
  • Put it into the plugin list
// src/ckeditor.js
...
ClassicEditor.builtinPlugins = [
    ...
    SimpleUploadAdapter
]
...
  • Re-build with added plugin for next step
npm run build

Using ckeditor-5-build-classic-custom in your app

  • Use the local package ckeditor5-build-classic-custom
cd app

# Check package.json to see the usage of local package ckeditor5-build-classic-custom

// package.json
...
"@ckeditor/ckeditor5-build-classic": "file:../ckeditor5-build-classic-custom",
...

npm install
// components/editor.js
...
import CKEditor from "@ckeditor/ckeditor5-react";
...
  • Config the plugin SimpleUploadAdapter
// components/editor.js
...
<CKEditor
          editor={ClassicEditor}
          config={{
            // Pass the config for SimpleUploadAdapter
            simpleUpload: {
              // The URL that the images are uploaded to.
              uploadUrl: "http://example.com",

              // Enable the XMLHttpRequest.withCredentials property.
              withCredentials: true,

              // Headers sent along with the XMLHttpRequest to the upload server.
              headers: {
                "X-CSRF-TOKEN": "CSRF-Token",
                Authorization: "Bearer <JSON Web Token>",
              },
            },
          }}
...
  • Dynamic import the Editor component with mode ssr=false to prevent errors in Next.js
// pages/index.js
...
const Editor = dynamic(() => import("../components/editor"), {ssr: false})
...
  • Start app
npm run dev
  • Build & export
npm run build
npm run export

Author

  • nghiaht

nextjs-ckeditor5's People

Contributors

nghiaht avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.