symfony - 简单的管理包。Trix 编辑器。更改代码段的包装标签。->
问题描述
解决方案
我遇到了完全相同的问题,不幸的是我不知道如何更新 Trix 源代码以在 pre 元素中添加 code 元素并添加类。我在这里问了这个问题,我将打开一个问题,看看 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)
})
};
我还写了一篇博文,详细介绍了这段代码的作用。我使用 Rails 6,帖子中有一个格式示例。如果您有任何问题,请告诉我。
推荐阅读
- java - 使用 Streams 获取每个子部门和部门的员工,
- python - Python上根据特定条件删除多列CSV文件
- cplex - 如何声明具有 IloNumArray 类型的动态数组?
- r - 在 R 中转换纵向数据以进行事件时间分析
- node.js - 在共享 CPanel 服务器上使用 Socket IO 运行 NodeJS 应用程序
- java - 可以修改sql中的唯一约束吗?
- python-3.x - 附加模式下的 open() 未按预期运行
- java - 创建@OneToOne 时抛出错误无法检索结果集
- java - XML 模式验证:找不到元素(根)的声明
- r - 根据条件合并 2 个长格式数据集