Question

我正在将Easy Admin Bundle用于一个迷你Symfony应用程序。该捆绑包随附trix editor用于text_editor字段输入。该编辑器非常酷，提供了code功能，可将段落封装在<pre>标签中。问题是我在前端使用highlightjs使代码段更漂亮。现在 highlightjs 要求将代码封装在<pre><code> ...code here... </code></pre>标签中，这真是令人讨厌。

有什么方法可以控制用 trix编辑器封装code部分中的标签。在我的特定情况下，从<pre>到<pre><code>？

Answer 1

我遇到了完全相同的问题，不幸的是，我无法弄清楚如何更新Trix源代码以在pre元素中添加code元素，以及添加类。我问了一个问题here，我将打开一个问题，看看Trix的好伙伴是否会考虑添加此功能。

因此，我整理了一个技巧，可以在向用户显示pre元素时对其进行转换。代码如下所示：

const applyFormattingToPreBlocks = function () {
  const preElements = this.showPostBody.querySelector('.trix-content').querySelectorAll('pre');
  preElements.forEach(function(preElement) {
    const regex = /(?!lang\-\\w\*)lang-\w*\W*/gm;
    const codeElement = document.createElement('code'); 
    if (preElement.childNodes.length > 1) {
      console.error('<pre> element contained nested inline elements (probably styling) and could not be processed. Please remove them and try again.')
    }
    let preElementTextNode = preElement.removeChild(preElement.firstChild);
    let language = preElementTextNode.textContent.match(regex);
    if (language) {
      language = language[0].toString().trim();
      preElementTextNode.textContent = preElementTextNode.textContent.replace(language, '');
      codeElement.classList.add(language, 'line-numbers');
    }
    codeElement.append(preElementTextNode)
    preElement.append(codeElement)
  })
};

我还写了一个blog post，它详细介绍了此代码的工作方式。我使用Rails 6，该帖子提供了一个格式化外观示例。让我知道你是否有疑问。

简易管理包。 Trix编辑器。更改代码节的包装器标签。 <pre>-> <pre> <code>

1 个答案: