CODEWITHSUNDEEP
javascriptckeditorrich-text-editorckeditor5
Mateusz
Mateusz

Reputation: 683

CKEditor5, how to test proof of concept for simple plugin?

I have an idea for a plugin for CKEditor5 but configuring everything seems to be overwhelming and complicated. So pretty much don't know how to start. Is there any way how I could test if my idea for a plugin is worth going deeper into this project? Some step by step guide will be helpful.

Upvotes: 2

Views: 639

Answers (1)

Mateusz
Mateusz

Reputation: 683

There are at least 2 ways, which I found. You can write some simple proof of concept plugins in manual test for CKEditor5 or extend one of CKEditor5's builds.

Creating new plugin inside manual test:

CKEditor5 code is compiled and served by pre-configured webpack, so you can only worry about writing proper plugin's code. What's more you can use watch mode which will in real time reflect changes in your simple plugin. Webpack also rebuild page with test which contains your simple plugin.

Step by step guide:

  1. Follow with guide to setup environment here
    • npm install -g yarn mgit2
    • git clone https://github.com/ckeditor/ckeditor5.git
    • cd ckeditor5
    • mgit sync
    • yarn install
  2. Open file with test: ckeditor5/packages/ckeditor5-core/tests/manual/article.js. You can write plugin in this file
  3. Run test in watch mode to have builded editor available in your browsers: yarn run manual -sw --files=core/manual/article.js
  4. Open browser on page: http://localhost:8125

  5. Write simple plugins in "article" test. You can add those entries to see if its works:

    • Add this part, before editor creation.

      import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
class SimplePlugin extends Plugin {
    init() {
        console.log( 'Hello world' );
    }
}

    • And modify list of included plugins in configuration from: plugins: [ ArticlePluginSet ],, to: plugins: [ ArticlePluginSet, SimplePlugin ],

  6. Refresh page with test and you should see in the console text: Hello world. Now you can implement new changes to your Simple Plugin and see result on page.

Creating new plugin inside CKEditor5 build:

Alternative solution is to use one of CKEditor5 builds and extend it with your own simple plugin.

Step by step guide:

  1. Clone build, e.g: git clone https://github.com/ckeditor/ckeditor5-build-classic.git
  2. Install dependencies: npm install

  3. You can add plugin in src/ckeditor.js in a similar way as it was done in previous guide.

    • Add this part, before editor creation.

      import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
class SimplePlugin extends Plugin {
    init() {
        console.log( 'Hello world' );
    }
}

    • And modify list of included plugins in configuration. To plugins array add SimplePlugin,

  4. Now build your new package with npm run build

  5. Run some http server in your project directory and run samples/index.html. You should see Hello world in browser's console.

Upvotes: 2

Related Questions