如何在Summernote中集成After the Deadline语法检查并实现结果展示？

Let’s break down your problems one by one and provide actionable fixes:

1. Mapping CKEDITOR.dom Operations to Summernote-Compatible DOM Actions #

Summernote works directly with native DOM elements (or wraps them in jQuery), so you can replace the CKEditor-specific DOM utilities with vanilla JS or jQuery methods. Here’s how to refactor the core atd_core functions:

var load_AtD_core = function (success) {
  atd_core = new AtDCore();

  // Replace CKEditor's map with native array iteration (cleaner than manual for loops)
  atd_core.map = function (array, callback) {
    array.forEach(callback);
  };

  // Replace CKEditor's hasClass with native classList (or jQuery if you prefer)
  atd_core.hasClass = function (node, className) {
    if (!node || node.nodeType === 3) return false; // Skip text nodes
    // Native JS approach (recommended)
    return node.classList.contains(className);
    // Alternative jQuery approach: return $(node).hasClass(className);
  };

  // Simplify contents() — Summernote uses native DOM nodes, no need for node.$
  atd_core.contents = function (node) {
    return node.childNodes;
  };

  // Refactor other CKEditor-specific functions similarly:
  // Example: For getting node text, use native textContent
  // atd_core.getText = function(node) { return node.textContent.trim(); };

  success(); // Proceed once core utilities are ready
};

Key takeaways:

• Summernote doesn’t wrap DOM elements in proprietary objects like CKEditor does, so you can use standard DOM APIs directly.
• Stick to native JS methods for better performance, or use jQuery if your project already relies on it.

2. Creating a Context Menu for ATD Suggestions in Summernote #

Summernote has a built-in context menu system you can extend, or you can bind a custom right-click handler to error-marked elements. Here’s a practical approach:

Step 1: Attach Error Data to Marked Nodes #

When applying ATD’s error styling, add a custom data attribute to store suggestion details:

// Modify your markMyWords call to attach error metadata
atd_core.markMyWords(divSummer.childNodes, results.errors, function(errorNode, errorData) {
  // Store error details (suggestions, type, etc.) in a data attribute
  errorNode.setAttribute('data-atd-errors', JSON.stringify(errorData));
  // Apply visual error styling (e.g., wavy red underline)
  errorNode.style.textDecoration = 'underline wavy red';
});

Step 2: Extend Summernote’s Context Menu #

Use Summernote’s contextmenu configuration to add dynamic suggestion items when an error node is right-clicked:

$('#summernote').summernote({
  toolbar: [..., 'atdCheck'], // Keep your existing ATD toolbar button
  contextmenu: ['link', 'image', 'video', 'atdSuggestions'], // Add custom menu group
  callbacks: {
    onContextmenu: function(e) {
      // Find the nearest error node from the right-click target
      const errorNode = e.target.closest('[data-atd-errors]');
      if (!errorNode) return;

      // Parse stored error data
      const errorData = JSON.parse(errorNode.getAttribute('data-atd-errors'));
      const editor = $(this).summernote('editor');

      // Clear old suggestion items before adding new ones
      editor.contextmenu.remove('atdSuggestions');

      // Add each suggestion as a menu item
      errorData.suggestions.forEach(suggestion => {
        editor.contextmenu.addItem({
          label: suggestion,
          action: () => {
            // Replace error text with selected suggestion
            errorNode.textContent = suggestion;
            // Remove error styling and metadata
            errorNode.style.textDecoration = '';
            errorNode.removeAttribute('data-atd-errors');
          }
        }, 'atdSuggestions');
      });
    }
  }
});

Alternative: Custom Right-Click Handler #

If you prefer a simpler setup, bind a jQuery contextmenu event directly to the editor’s editable area:

$('.note-editable').on('contextmenu', '[data-atd-errors]', function(e) {
  e.preventDefault();
  const errorData = JSON.parse($(this).attr('data-atd-errors'));
  
  // Replace this prompt with a styled dropdown/modal for better UX
  const selected = prompt('Choose a correction:', errorData.suggestions.join('\n'));
  if (selected) {
    $(this).text(selected).removeAttr('data-atd-errors').css('text-decoration', '');
  }
});

3. Existing ATD + Summernote Integration Solutions #

As of now, there’s no official or widely maintained Summernote plugin for After the Deadline. However, your current approach is solid:

• Keep refactoring the CKEditor ATD plugin’s DOM logic to use native JS/jQuery as outlined in section 1.
• Search GitHub for community-contributed gists or small plugins (try terms like "summernote atd" or "summernote grammar check") — you might find partial implementations to build on.
• If you’re open to alternatives, consider switching to a more modern grammar check API like Grammarly’s SDK, which has better frontend integration support (though this would require reworking your backend setup).

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