npm 包 @ckeditor/ckeditor5-dev-env 使用教程

目录

1. 介绍
2. 安装
3. 使用
4. 示例代码
5. 结论

1. 介绍

@ckeditor/ckeditor5-dev-env 是一个用于构建 CKEditor5 开发环境的 npm 包，它提供了一个完整的开发环境，包括 webpack 配置，热部署功能等等。

此 npm 包适用于 CKEditor5 的插件开发及贡献者的使用，详情请参见文档：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/development-environment.html

2. 安装

在您的项目目录中使用以下命令安装 @ckeditor/ckeditor5-dev-env：

npm install --save-dev @ckeditor/ckeditor5-dev-env

3. 使用

在您的项目中，您需要创建一个 webpack 配置文件，然后在 package.json 文件的 scripts 部分中，添加一些启动开发环境的命令，例如：

"scripts": {
    "start": "npx ckeditor5-dev-webpack-plugin --config webpack.config.js"
}

完成上述步骤后，你可以通过运行以下命令，启动开发环境：

npm start

4. 示例代码

webpack.config.js

-- -------------------- ---- -------
----- --------------------- - --------------------------------------------------
----- ----------------- - -------------------------------
----- ---- - ----------------

-------------- - -
    ------ -----------------
    -------- -
        --- -----------------------
            --------- -----
            -------------------- -----
        ---
        --- -------------------
            --------- ------------------
        --
    --
    ------- -
        ------ -
            -
                ----- ---------
                ---- ------------------
            -
        -
    --
    ------- -
        ----- ----------------------- --------
        --------- ---------------
    -
--

index.html

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ---------------- ------------
    ------- -----------------------------------------------------------------------------------------
    -------
        ------- -
            ----------- -----
            ------- ------
            ------- --- ----- -----
        -
    --------
-------
------
    ------------- ---- ----------------
    ---- ----------- ---------------------
    --------
        -------------
            -------- ----------------------- --------- - -
            ------- ----- -- -
                -------------- ----- --
            - --
    ---------
-------
-------

index.js

-- -------------------- ---- -------
-- ---- ------ ----- --- ------- ----- -------
------ ----------------------------------------------------------

-- ------ --- --------- ------- ------ ------
------ ------------- ---- ------------------------------------

-- ----------- --- ----- -- -----------------------------------------
-- - -------------------- --- ------------- - -
    ------------ ------ ---- --------- ----------- ------- --
-

-------------------------- ------------------- -- -- -
    -------------
        -------- ----------------------- --------- - -
        ------- ----- -- -
            -------------- ----- --
        - --
- --

运行 npm start 后，您应该可以在浏览器中看到 CKEditor5 示例应用程序。

5. 结论

在本教程中，我们介绍了如何使用 @ckeditor/ckeditor5-dev-env npm 包，创建一个 CKEditor5 开发环境，并开发插件使用示例代码证明了其使用方法的可行性。

使用此 npm 包，可为 CKEditor5 的插件开发及贡献者提供更方便的开发环境，加快开发速度，提高开发体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabbdb5cbfe1ea0610832