帝国cms编辑器中使用代码高亮的方法
我的站长站
2020-05-09
共人阅读
帝国cms编辑器中使用代码高亮的方法，教大家如何在帝国cms编辑器中整合highlight。
1.首先下载highlight
下载地址：https://highlightjs.org/download/
下载解压后styles文件夹里面是风格样式。
2.接下来开始整合到编辑器
在/e/admin/ecmseditor/infoeditor/styles.js 代码中添加
{ name: 'Preformatted Text',element: 'pre' },添加完后编辑器样式会多出一个Preformatted Text选项
在我们需要使用代码高亮的地方使用Preformatted Text样式。
3.在需要使用代码高亮的模板中引入highlight。 可以调整样式在styles文件中，我们这里使用的是tomorrow-night-eighties.CSS样式。
<link rel="stylesheet" type="text/css" href="[!--news.url--]skin/web/css/tomorrow-night-eighties.css" />
<script type="text/javascript" src='[!--news.url--]skin/web/js/highlight.js'></script> //放在模板最底部
<script type="text/javascript"> hljs.initHighlightingOnLoad(); var allpre = document.getElementsByTagName("pre"); for(i = 0; i < allpre.length; i++) { var onepre = document.getElementsByTagName("pre")[i]; var mycode = document.getElementsByTagName("pre")[i].innerHTML; onepre.innerHTML = '<code id="mycode">'+mycode+'</code>'; } </script>至此插件整合完成。
相关专题
编辑器
2021-05-14 237编辑器是网站开发与内容发布的必备核心工具。本专题精心整理多款常用网页编辑器资源，涵盖各大主流CMS适配编辑器插件、开源HTML可视化编辑器源码、富文本编辑组件...
- UEditorPlus开源免费编辑器分享 [2025-04-15]
- ueditor百度编辑器取消span、b、i标签过滤方法 [2024-09-28]
- Novel开源Notion风格WYSIWYG编辑器,支持AI自动补全 [2024-09-04]
- disable-gutenberg禁用古腾堡(Gutenberg)编辑器插件 [2024-08-06]
- 网页版JSON编辑器源码 [2024-07-07]