CKEditor 4.6拖拽图片后邮件内容块边框残留、链接不渲染问题求助

Hey there, let's dig into your issues and fix them step by step!

First, let's identify the root causes: #

1. Persistent dashed borders in emails: Your code uses $(this).css() to directly set inline styles on the content blocks. When CKEditor exports the content for the email, those inline border styles get included in the final HTML. Even though you revert it after drag/drop, the inline style stays attached to the element, so email clients render it.
2. Broken link rendering: There are two key culprits here:
   • You have a typo in your selector: $("cke_editable") should be $(".cke_editable") (missing the dot for class selection). This means your event handlers are binding to non-existent <cke_editable> tags instead of the actual CKEditor editable elements, causing unexpected interference with CKEditor's internal content handling.
   • Your drag/drop events aren't preventing default browser behavior, which can disrupt how CKEditor processes content like inserting links or images.

Here's the fixed solution: #

1. Use CSS classes instead of inline styles

Add these styles to your app's CSS (they won't affect the email since we'll remove the temporary class before export):

/* Default content block border */
.threeRowLayout {
  border: 2px dashed #c0c0c0;
}

/* Highlight style for drag over */
.threeRowLayout.drag-highlight {
  border: 2px solid #00ADE6;
}

2. Fix the JavaScript code

Update your function to use class toggles, fix the selector, and prevent default drag behavior:

function setupDragBorder(parentClass) {
  // Fix the selector: use .cke_editable for class selection
  $(`.cke_editable`).parents(parentClass).each(function () {
    const $contentBlock = $(this);
    
    $contentBlock.on("dragover", function (e) {
      // Prevent default to enable drop event and avoid browser default actions
      e.preventDefault();
      e.stopPropagation();
      $contentBlock.addClass("drag-highlight");
    });

    $contentBlock.on("dragleave drop", function (e) {
      e.preventDefault();
      e.stopPropagation();
      $contentBlock.removeClass("drag-highlight");
    });
  });
}

setupDragBorder(".threeRowLayout");

3. Ensure clean email export

When preparing the content for email sending, strip out any temporary drag-highlight classes from the HTML with a quick call right before export:

// Example: Clean up content before sending
const emailContent = $(".threeRowLayout")
  .removeClass("drag-highlight")
  .html();
// Then use emailContent for your test email

Additional checks for link rendering: #

• Verify your CKEditor allowedContent configuration isn't filtering out <a> tags. For example, ensure your config includes something like:

  CKEDITOR.config.allowedContent = 'a[!href,target]; p; img[src,alt]; /* add other allowed elements */';
  

• Clear your browser cache and test again—sometimes cached CKEditor instances can cause unexpected behavior after code changes.

This approach keeps your app's UI feedback intact while preventing those unwanted styles and link issues from appearing in the sent emails.

内容的提问来源于stack exchange，提问作者T-Bone