This tutorials is outdated since it is for Strapi v3. We redirect you to the part of our documentation concerning the creation of a new WYSIWYG field in the admin panel

How to Change the Default WYSIWYG Editor to Toast UI Editor in Strapi

If you're a Strapi user seeking a more powerful and intuitive editor, changing the default WYSIWYG to the Toast UI Editor could significantly enhance your content creation workflow. Toast UI Editor offers real-time preview and a host of features that can streamline your editing process.

How to Change the Default WYSIWYG to Toast UI Editor

To improve your content editing experience in Strapi, you can replace the default WYSIWYG editor with the Toast UI Editor. This guide walks you through integrating the Toast UI Editor, configuring it for compatibility, and troubleshooting common issues.

Integrate Toast UI Editor

First, you'll need to install the Toast UI Editor plugin for Strapi. Run the following command:

npm install strapi-plugin-toastui-editor

Alternatively, if you're using yarn:

yarn add strapi-plugin-toastui-editor

Next, enable the plugin by adding it to your config/plugins.js file:

1module.exports = {
2  // ...
3  'toastui-editor': {
4    enabled: true,
5    resolve: './node_modules/strapi-plugin-toastui-editor',
6  },
7  // ...
8};

If the plugins.js file doesn't exist, create it within the config directory of your Strapi project. This configuration tells Strapi to include the Toast UI Editor plugin when it starts.

After making the changes, restart your Strapi server to load the new plugin:

npm run build
npm run develop

or

yarn build
yarn develop

You should now be able to edit your Rich Text content using the Toast UI Editor!

Configure Settings for Compatibility

To ensure compatibility and tailor the editor to your needs, you can customize various settings of the Toast UI Editor. For example, you may want to adjust the toolbar items, styling, or functionalities.

To customize the editor toolbar, modify the settings in your config/plugins.js or create a separate configuration file as needed:

1module.exports = {
2  // ...
3  'toastui-editor': {
4    enabled: true,
5    resolve: './node_modules/strapi-plugin-toastui-editor',
6    config: {
7      editor: {
8        toolbarItems: [
9          'heading',
10          'bold',
11          'italic',
12          'strike',
13          'divider',
14          'hr',
15          'quote',
16          'divider',
17          'ul',
18          'ol',
19          'task',
20          'indent',
21          'outdent',
22          'divider',
23          'table',
24          'link',
25          'image',
26          'divider',
27          'code',
28          'codeblock',
29        ],
30      },
31    },
32  },
33  // ...
34};

Ensure that the configurations align with both Strapi's and Toast UI Editor's documentation.

Troubleshoot Common Integration Issues

If you encounter issues during the integration, here are some troubleshooting steps:

• Version Compatibility: Confirm that the plugin version is compatible with your Strapi version.

• Clear Cache: Rebuild the admin panel to clear any cached files:

  npm run build

  or

  yarn build

• Plugin Conflicts: Disable other editor plugins that might conflict with the Toast UI Editor.

• Check Logs: Review the console and server logs for error messages.

For persistent issues, consult the Strapi community forums or the plugin's documentation for additional support.

Customizing Toast UI Editor in Strapi

One of the strengths of the Toast UI Editor is its flexibility and customization options. You can tailor the editor to suit your content creation needs.

Modifying Toolbar Items

Customize the toolbar to include only the tools your content creators need. Adjust your configuration accordingly:

1module.exports = {
2  // ...
3  'toastui-editor': {
4    // ...
5    config: {
6      editor: {
7        toolbarItems: [
8          'heading',
9          'bold',
10          'italic',
11          'underline',
12          'strike',
13          'divider',
14          'link',
15          'image',
16          'table',
17          'code',
18          'codeblock',
19        ],
20      },
21    },
22  },
23  // ...
24};

Adding Plugins and Extensions

If you require additional functionality, you can add plugins or extensions to the editor. This process might involve installing additional packages and updating your configurations.

For example, to add a color picker plugin:

1. Install the plugin:

   npm install @toast-ui/editor-plugin-color-syntax

2. Import and configure the plugin in your config/plugins.js:

   1const colorSyntax = require('@toast-ui/editor-plugin-color-syntax');
   2
   3module.exports = {
   4  // ...
   5  'toastui-editor': {
   6    // ...
   7    config: {
   8      editor: {
   9        plugins: [colorSyntax],
   10      },
   11    },
   12  },
   13  // ...
   14};

Integrating with Media Library

The Toast UI Editor can integrate with Strapi's Media Library, allowing you to easily insert images and media into your content. Ensure that the editor's settings are configured to interact seamlessly with the Media Library, and that you have appropriate permissions set up.

Common Challenges with Toast UI Editor

While integrating the Toast UI Editor can enhance your content creation process, you may face some challenges. Being aware of these obstacles and their solutions can help ensure a smooth integration.

Identify Integration Obstacles and Solutions

Compatibility Issues: Conflicts can arise if the editor's configurations don't align with Strapi's content types. To overcome this, customize the editor settings to match your content structure. Refer to the documentation of both Strapi and Toast UI Editor for guidance.

Incorporating Custom Plugins: Integrating additional plugins requires careful setup. Test each plugin individually in a development environment to identify any compatibility issues before deploying them in your production environment.

Resolve Common Configuration Errors

Configuration errors might prevent the editor from loading correctly or cause it to malfunction. To resolve them:

• Check File Paths: Ensure all file references in your configuration match the actual file locations.
• Verify Dependencies: Make sure all required dependencies are installed and correctly referenced in your project.
• Consult Documentation: Refer to the official documentation for both Strapi and the Toast UI Editor to confirm that your configuration adheres to the recommended guidelines.
• Test Incrementally: Make changes step by step and test after each change to isolate any issues that arise.

Being meticulous with your configuration can save time and prevent frustration, leading to a smoother integration process.

Evaluating Impact on Content Management

Changing the default WYSIWYG editor to Toast UI Editor can significantly affect your content management workflow in Strapi. It's essential to assess how this change influences content creation efficiency and overall user satisfaction.

Assessing Changes in Content Creation Efficiency

Switching editors may streamline your workflow by introducing new features or simplifying existing tasks. Observe how the new editor handles:

• Formatting: Is text formatting more intuitive?
• Media Integration: How easily can you insert images and other media?
• User Interface: Is the interface more user-friendly for your team?

Monitor the time it takes to create and edit content before and after the switch to quantify any improvements in efficiency.

Gathering User Feedback Post-Implementation

After implementing the Toast UI Editor, gather feedback from your team members who use it daily. Their insights can reveal benefits or challenges that aren't immediately obvious. Encourage open discussions about their experiences to identify any issues that need addressing. This feedback is invaluable for making informed decisions about further adjustments or training needs.

Benefits of Using Toast UI Editor in Strapi

Implementing the Toast UI Editor in Strapi offers several advantages:

• Real-Time Preview: The editor provides real-time rendering of your Markdown content, allowing you to see how your content will look as you write it.
• User-Friendly Interface: With an intuitive interface, content creators can easily format text, insert media, and manage content without a steep learning curve.
• Customization: Toast UI Editor is highly customizable, enabling you to adjust it to fit your project's needs. Modify the toolbar, add plugins, and tweak settings to enhance functionality.
• Supports Markdown and WYSIWYG Modes: The editor allows users to switch between Markdown and WYSIWYG modes, catering to both developers who prefer Markdown and content editors who prefer a visual interface.

By leveraging these benefits, you can improve the efficiency and satisfaction of your content management workflows.

Comparing Toast UI Editor with Other WYSIWYG Editors

When choosing a WYSIWYG editor for Strapi, it's beneficial to compare the options available.

Toast UI Editor vs. CKEditor

Both Toast UI Editor and CKEditor are popular choices. Here's a brief comparison:

• Features:
  • CKEditor: Offers a rich set of features, including advanced text formatting, embedding media, collaboration tools, and a wide range of plugins.
  • Toast UI Editor: Provides a balance between simplicity and functionality, with a focus on Markdown support and real-time preview.
• Customization:
  • CKEditor: Highly customizable with numerous plugins, but may require more setup.
  • Toast UI Editor: Offers straightforward customization options and may be easier to integrate with custom configurations.
• Performance: Depending on your project's needs, one editor might perform better than the other. Consider testing both in your environment to evaluate their performance.

Choosing the Right Editor

Select an editor that aligns with your specific requirements:

• Technical Proficiency: Consider the comfort level of your content creators with Markdown or visual editors.
• Functionality Needs: Determine which features are essential for your content workflow.
• Customization Requirements: Assess how much you need to customize the editor to fit your needs.
• Integration Capabilities: Ensure the editor integrates well with existing plugins and tools in your Strapi project.

By carefully evaluating these factors, you can choose the editor that best fits your project's needs.

Conclusion

Integrating the Toast UI Editor into your Strapi project can significantly enhance your content creation capabilities. By following the steps outlined in this guide, you can successfully replace the default WYSIWYG editor, customize it to suit your needs, and address any challenges that arise.

Remember to:

• Carefully follow the integration steps to ensure a smooth setup.
• Customize settings to match your project's requirements.
• Troubleshoot issues methodically to resolve any problems.
• Gather feedback from users to continually improve your content management workflow.

By embracing advanced tools like the Toast UI Editor, you empower your content team to produce higher-quality content more efficiently.

Get started with Strapi by creating a project, using a starter, or trying our instant live demo. If you have any questions, consult our forum where we are always ready to help.

See you soon!

Additional Resources

• Strapi Documentation: Creating a New WYSIWYG Field in the Admin Panel
• Toast UI Editor Documentation
• Awesome Strapi GitHub Repository
• Strapi Community Forums
• Toast UI Editor GitHub Repository