CKEditor5，如何测试简单插件的概念验证？

Question

我有一个CKEditor5插件的想法，但配置一切似乎是压倒性的和复杂的。所以几乎不知道如何开始。有什么方法可以测试我对插件的想法是否值得深入了解这个项目？一些分步指南将有所帮助。

Answer 1

我发现至少有两种方法。您可以在CKEditor5的手动测试中编写一些简单的概念验证插件，或者扩展CKEditor5的一个版本。

Creating new plugin inside manual test:

CKEditor5代码由预先配置的webpack编译和提供，因此您只需担心编写正确的插件代码。您还可以使用手表模式实时反映简单插件的变化。 Webpack还使用包含简单插件的test重建页面。

分步指南：

1. 按照设置环境here的指南 npm install -g yarn mgit2 git clone https://github.com/ckeditor/ckeditor5.git cd ckeditor5 mgit sync yarn install
2. 用测试打开文件：ckeditor5/packages/ckeditor5-core/tests/manual/article.js。您可以在此文件中编写插件
3. 在监视模式下运行测试，以便在浏览器中使用构建编辑器：yarn run manual -sw --files=core/manual/article.js
4. 打开页面上的浏览器：http://localhost:8125
5. 在“文章”测试中编写简单的插件。您可以添加这些条目以查看其是否有效： 在编辑器创建之前添加此部件。

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

   并修改配置中包含的插件列表：plugins: [ ArticlePluginSet ],，：plugins: [ ArticlePluginSet, SimplePlugin ],
6. 使用测试刷新页面，您应该在控制台文本中看到：Hello world。现在，您可以对Simple Plugin实施新的更改，并在页面上查看结果。

Creating new plugin inside CKEditor5 build:

替代解决方案是使用CKEditor5构建之一并使用您自己的简单插件扩展它。

分步指南：

1. 克隆构建，例如：git clone https://github.com/ckeditor/ckeditor5-build-classic.git
2. 安装依赖项：npm install
3. 您可以使用与之前指南中类似的方式在src/ckeditor.js中添加插件。 在编辑器创建之前添加此部件。

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

   并修改配置中包含的插件列表。要插件数组添加SimplePlugin，
4. 现在用npm run build构建你的新包
5. 在项目目录中运行一些http服务器并运行samples/index.html。你应该在浏览器的控制台中看到Hello world。