v4 代码迁移：更新所见即所得自定义

¥v4 code migration: Updating WYSIWYG customizations

本指南是 v4 代码迁移指南 的一部分，旨在帮助你将 Strapi 应用的代码从 v3.6.x 迁移到 v4.0.x

¥This guide is part of the v4 code migration guide designed to help you migrate the code of a Strapi application from v3.6.x to v4.0.x

🤓 v3/v4 比较

在 Strapi v3 中，所见即所得是通过覆盖原始组件并替换文件来定制的。

¥In Strapi v3, the WYSIWYG is customized by overriding the original component and replacing the file.

在 Strapi v4 中，不再支持文件替换。要自定义默认的所见即所得，新的 addFields() 方法应与 扩展系统 一起使用。

¥In Strapi v4, file replacement is no longer supported. To customize the default WYSIWYG, the new addFields() method should be used with the extensions system.

要将 WYSIWYG 自定义迁移到 Strapi v4：

¥To migrate WYSIWYG customizations to Strapi v4:

1. 创建 ./src/admin/extensions 文件夹。

   ¥Create the ./src/admin/extensions folder.

2. 在 ./src/admin/extensions 中，创建一个新的 components 子文件夹。

   ¥In ./src/admin/extensions, create a new components subfolder.

3. 在 ./src/admin/extensions/components 中，创建一个新的组件文件（例如 MyNewWysiwyg.js）并在此处添加你的逻辑。该文件将用于替换默认的所见即所得编辑器。

   ¥In ./src/admin/extensions/components, create a new component file (e.g. MyNewWysiwyg.js) and add your logic here. This file will be used to replace the default WYSIWYG editor.

4. 将 ./src/admin/app.example.js 文件从 Strapi v3 重命名为 ./src/admin/app.js。

   ¥Rename the ./src/admin/app.example.js file from Strapi v3 to ./src/admin/app.js.

5. 更新 ./src/admin/app.js，进行以下修改：

   ¥Update ./src/admin/app.js with the following modifications:

   • 导入在步骤 3 中创建的新 WYSIWYG 组件。

     ¥Import the new WYSIWYG component created at step 3.

   • 使用应用的 bootstrap 生命周期内的 addFields() 方法注入新的 WYSIWYG 组件。addFields() 接受具有 2 个属性的对象：将 type 设置为 'wysiwyg'，将 Component 设置为导入的所见即所得组件的名称。

     ¥Inject the new WYSIWYG component by using the addFields() method inside the bootstrap lifecycle of the application. addFields() accepts an object with 2 properties: set type to 'wysiwyg' and Component to the name of the imported WYSIWYG component.

   ./src/admin/app.js

   
   import MyNewWysiwyg from './extensions/components/MyNewWysiwyg'
   
   export default {
     bootstrap(app) {
       app.addFields({ type: 'wysiwyg', Component: MyNewWysiwyg });
     },
   };

💡 定制提示

所见即所得也可以由添加新字段的插件替换。你可以在 Strapi 市场 或 开发自己的插件 中找到社区所见即所得插件。

¥The WYSIWYG can also be replaced by a plugin that adds new fields. You can find community WYSIWYG plugins in the Strapi Market or develop your own plugin.