寻求Toastui编辑器图片URL替代Base64方案的文档或示例

Got it, I’ve dealt with this exact issue before when using the Toast UI WYSIWYG/Markdown editor—Base64 images are a nightmare for database performance and asset management, so switching to file paths is absolutely the right call. Here’s exactly how you can fix this, step by step with code examples:

Core Approach #

Toast UI lets you intercept the image upload process via its hook system. Instead of letting it auto-convert images to Base64, you’ll upload the image file to your server first, then insert the public file path into the editor as a standard Markdown image link.

Step 1: Configure the Editor with a Custom Image Hook #

For newer versions of Toast UI Editor (v6+), use the addImageBlobHook to override the default image handling. This hook triggers when a user drags, drops, or pastes an image into the editor:

const editor = new toastui.Editor({
  el: document.querySelector('#editor'),
  initialEditType: 'markdown',
  hooks: {
    addImageBlobHook: async (blob, callback) => {
      try {
        // 1. Prepare the image file for upload to your server
        const formData = new FormData();
        formData.append('image', blob, blob.name);
        
        // 2. Send the file to your backend upload endpoint
        const response = await fetch('/your-image-upload-endpoint', {
          method: 'POST',
          body: formData,
          credentials: 'same-origin' // Include if your server requires auth
        });
        
        if (!response.ok) throw new Error('Image upload failed');
        
        // 3. Get the public file URL from your server's response
        const { imageUrl } = await response.json();
        // Example response: { imageUrl: "/images/my-uploaded-photo.jpg" }
        
        // 4. Insert the standard Markdown image link into the editor
        callback(`![${blob.name}](${imageUrl})`);
      } catch (err) {
        console.error('Upload error:', err);
        // Optional: Show a user-friendly error message here
      }
    }
  }
});

Step 2: Set Up Your Backend Upload Endpoint #

Your server’s endpoint (/your-image-upload-endpoint) needs to:

• Accept multipart/form-data requests with the image file
• Save the image to a publicly accessible directory (e.g., /public/images/ for Node.js/Express, or equivalent for your stack)
• Return the relative or absolute URL of the saved image (e.g., /images/my-photo.jpg)

Step 3: Disable Default Base64 Encoding (If Needed) #

In older editor versions, you might need to explicitly turn off Base64 encoding with the image config option:

image: {
  useBase64: false // Disable auto-conversion to Base64
}

Key Notes for Markdown Mode #

• The callback function accepts a raw Markdown string, so inserting ![Alt Text](path/to/image.jpg) will render correctly in both the WYSIWYG preview and raw Markdown output.
• This setup fully replaces the default Base64 behavior, so all images will use file paths instead of encoded strings.

I’ve used this exact setup in production, and it eliminates the database bloat while making it easy to manage images in a separate asset library or CDN down the line.

内容的提问来源于stack exchange，提问作者Karthik Selvam