PHP+MySQL CMS中“Read More”按钮失效问题求助

Hey there! Let's figure out why your "Read More" button stopped working after adding new posts with TinyMCE, and get it back up and running while keeping the text truncation intact.

What's Probably Causing the Issue #

TinyMCE automatically adds structured HTML to your content (like <p> tags, nested <span>s, or line breaks) when you edit posts. Your original text truncation logic was likely built to handle simpler content—when it tries to cut off this new, more complex HTML, it might:

• Count HTML tags as part of the "text length," leading to premature truncation or not truncating visible text at all
• Chop HTML tags halfway through, breaking the DOM structure and making your button unclickable or invisible
• Prevent click events from binding correctly if the truncated content messes up element nesting

Step-by-Step Fixes #

1. Adjust Your Truncation Logic to Ignore HTML Tags

Stop counting HTML markup as part of your text length. Instead, extract the plain text first to calculate where to truncate, then safely apply that to the HTML content. Here's a quick example of how to do this in JavaScript:

function safeTruncateContent(htmlContent, maxVisibleChars) {
  // Create a temporary element to extract plain text
  const tempEl = document.createElement('div');
  tempEl.innerHTML = htmlContent;
  const plainText = tempEl.textContent.trim();

  // No need to truncate if content is short enough
  if (plainText.length <= maxVisibleChars) {
    return htmlContent;
  }

  // Truncate the plain text, then add your Read More button
  const truncatedText = plainText.slice(0, maxVisibleChars) + '...';
  tempEl.textContent = truncatedText;
  return `${tempEl.innerHTML} <button class="read-more">Read More</button>`;
}

This way, you're only truncating the actual visible text, not the hidden HTML tags.

2. Normalize TinyMCE's Output Format

Check if TinyMCE is adding unexpected markup that's throwing off your logic. Open your browser's DevTools (F12 > Elements tab) and compare the HTML of a working old post vs. the new broken one. To make TinyMCE's output more consistent:

• Add these settings to your TinyMCE configuration to standardize tags:

  tinymce.init({
    // ... other settings
    forced_root_block: 'p', // Force all content into <p> tags
    remove_empty_editor_content: true, // Remove empty tags
    convert_newlines_to_brs: false, // Avoid extra <br> tags
  });
  

3. Use Event Delegation for the Read More Button

If your button's click event isn't firing, it might be because the truncated content is replacing elements after your initial event binding. Switch to event delegation to ensure clicks are detected no matter how the DOM changes:

// Instead of binding directly to .read-more elements
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('read-more')) {
    // Your "expand content" logic here
    const postContent = e.target.closest('.post-content');
    postContent.innerHTML = postContent.dataset.fullContent; // Store full content in a data attribute
  }
});

Just make sure you store the full, untruncated content in a data-full-content attribute on your post container before truncating.

4. Validate Truncated HTML

If your page layout looks messed up after truncation, you probably have unclosed HTML tags. Use your browser's DevTools to check the Elements tab—any red-highlighted tags mean you've got broken markup. The safe truncation function above avoids this by using textContent to replace truncated text, which automatically cleans up tags.

Quick Test #

After making these changes, create a new test post with TinyMCE, check if the truncation works without breaking the button, and verify that clicking "Read More" expands the full content as expected.

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