添加Vuetify依赖后Vue项目出现跨源样式表访问错误及CKEditor新窗口CSS丢失问题求助

Hey there, let's break down how to fix this frustrating issue where your CKEditor in a new window loses styles and throws a CORS error after adding Vuetify. I've run into similar style isolation problems with popups/new windows in Vue, so here's what you need to do:

Why This Happens #

When you open a new window, it creates a completely separate browser context with its own DOM and style environment. The CORS error pops up because browsers block access to CSSStyleSheet.cssRules for cross-origin stylesheets—this includes styles loaded via Vuetify or CKEditor that might be fetched from external sources (even if they're technically from your app, the new window treats them as cross-origin in some cases). Additionally, the new window doesn't automatically inherit the main app's styles, so CKEditor and Vuetify styles don't get applied.

Step-by-Step Solutions #

1. Manually Inject Styles Into the New Window #

The most reliable fix is to explicitly add the required Vuetify and CKEditor styles to the new window's <head> when you open it. This bypasses the cross-origin restriction because you're loading the styles directly into the new window's context.

Here's how to implement this in your Vue component:

// Method that opens the new window with CKEditor
openEditorWindow() {
  const newWindow = window.open('', '_blank', 'width=900,height=700');
  if (!newWindow) return;

  // Wait for the new window to load basic DOM
  newWindow.document.write('<div id="ckeditor-container"></div>');
  newWindow.document.close();

  // Inject Vuetify styles
  const vuetifyLinks = document.querySelectorAll('link[href*="vuetify"]');
  vuetifyLinks.forEach(link => {
    const newLink = document.createElement('link');
    newLink.rel = 'stylesheet';
    newLink.href = link.href;
    newWindow.document.head.appendChild(newLink);
  });

  // Inject CKEditor styles
  const ckeditorLinks = document.querySelectorAll('link[href*="ckeditor"]');
  ckeditorLinks.forEach(link => {
    const newLink = document.createElement('link');
    newLink.rel = 'stylesheet';
    newLink.href = link.href;
    newWindow.document.head.appendChild(newLink);
  });

  // Mount your CKEditor component to the new window's container
  // (Adjust this based on how you're currently mounting the component)
  const app = createApp(YourCKEditorComponent);
  app.use(Vuetify); // If your component uses Vuetify components, initialize it here
  app.mount(newWindow.document.getElementById('ckeditor-container'));
}

2. Adjust CKEditor Configuration #

If you're using CKEditor 5, ensure that your editor configuration doesn't rely on cross-origin style fetching. For example, if you're using custom styles, define them inline or load them as local assets instead of external URLs. This reduces the chance of hitting CORS restrictions in the new window.

3. Fix Codesandbox Vuetify Compilation Errors #

The Codesandbox issue is almost always due to version mismatches or missing configuration. Here's how to resolve it:

• Match Vue and Vuetify versions: Use Vuetify 3 for Vue 3, Vuetify 2 for Vue 2.
• Properly initialize Vuetify in main.js:

  // For Vue 3
  import { createApp } from 'vue';
  import App from './App.vue';
  import { createVuetify } from 'vuetify';
  import 'vuetify/styles';
  
  const vuetify = createVuetify();
  const app = createApp(App);
  app.use(vuetify);
  app.mount('#app');
  

• Add vue.config.js (if needed):

  module.exports = {
    transpileDependencies: ['vuetify']
  };
  

• Remove conflicting dependencies: If you have old or duplicate Vue/Vuetify packages in your Codesandbox, delete them and reinstall the correct versions.

Final Notes #

The key takeaway is that new windows don't inherit your app's styles by default, and browser security rules block access to cross-origin stylesheet rules. Manually injecting the necessary styles directly into the new window's DOM will fix the CSS loss and CORS error. For Codesandbox, focusing on version compatibility and proper Vuetify setup should resolve the compilation issues.

内容的提问来源于stack exchange，提问作者Alexander Remesch