@ckeditor/ckeditor5-dev-bundler-rollup 是一个帮助 CKEditor 开发者构建和打包定制版编辑器的 npm 包。它使用 rollup 作为打包工具，并提供了一些插件和配置，以方便开发者自定义编辑器功能和样式。在本文中，我们将介绍 @ckeditor/ckeditor5-dev-bundler-rollup 的详细使用方法，并提供示例代码和指导，以帮助开发者深入了解 how to use npm package.
安装
使用 npm 安装 @ckeditor/ckeditor5-dev-bundler-rollup：
npm install --save-dev @ckeditor/ckeditor5-dev-bundler-rollup
使用
配置文件
在项目根目录下，新建一个名为 ckeditor.config.js 的文件，并添加以下代码：
-- -------------------- ---- ------- -------------- - - -- ---- --------- ------- -- ------- --------- ------- -- ------- --------- - -- --------- --------- ------------------------------------------ -- ------- ------------ ----------------------------------------- -- ------- ----------- ----------------------------------------------- -- ------------- ------- - -------- - -- ------- ----- ---------- -- ------- -------- - ---------------------- ------------- ---------- -------- --------------- ------------- --------------- ------- ------------ ------- ------------ --------------- -- ------- - ------- - - - - --展开代码
构建
执行以下命令，将会按照上述配置构建编辑器，并在 buildDir 目录下生成 classic 文件夹，其中包含了所需的插件和主题：
./node_modules/.bin/ckeditor5-dev-bundler --ckeditor-config=./ckeditor.config.js --webpack-config=./node_modules/@ckeditor/ckeditor5-dev-webpack-plugin/webpack.config.js
使用
在 HTML 中引入构建后的编辑器：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------- --------------- ------- ----------------------------------------- ------- ------ ------------ ------------ --------- ------------------------- -------- ------------- -------- ----------------------- ---------- -- - -------- - ---------- ---- ------- --------- ------- --------------- --------------- ------------ -- -------- - -------- - - ------ ------------ ------ ------------ ------ ---------------------- -- - ------ ----------- ----- ----- ------ -------- --- ------ --------------------- -- - ------ ----------- ----- ----- ------ -------- --- ------ --------------------- - - - - - ------ ------ -- - ------------ ------- --- ------------- ------ -- - - ------- ----- -- - -------------- ----------- -- - -- --------- ------- -------展开代码
我们可以通过 ClassicEditor.create() 方法创建一个编辑器实例，并将其绑定到一个 textarea 元素上。接着可以在配置对象中配置编辑器的 toolbar、heading 等选项。
结论
本文介绍了如何使用 @ckeditor/ckeditor5-dev-bundler-rollup 构建定制版编辑器，在构建前需要先配置 ckeditor.config.js 文件，通过 rollup 打包工具进行打包。我们还介绍了如何在 HTML 中使用构建后的编辑器，创建一个基本的编辑器实例。我们希望通过这篇文章的介绍，读者可以更深入的了解如何使用 npm 包 @ckeditor/ckeditor5-dev-bundler-rollup，并成功构建一个自定义编辑器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/138177
