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

Question

我对CKEditor5的插件有一个想法，但配置所有内容似乎是不堪重负且复杂的。因此，几乎不知道如何开始。有什么方法可以测试我对插件的想法是否值得深入研究这个项目？一些分步指南会有所帮助。

Answer 1

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

在手动测试中创建新插件：

CKEditor5代码是由预配置的webpack编译和提供的，因此您只需要担心编写适当的插件代码即可。 此外，您可以使用观看模式，该模式将实时反映您简单插件中的更改。 Webpack还会使用包含您的简单插件的测试来重建页面。

分步指南：

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进行新的更改，并在页面上查看结果。

在CKEditor5内部创建新插件：

另一种解决方案是使用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。