帝国cms编辑器中运用代码高亮的办法,教咱们如安在帝国cms编辑器中整合highlight。

1.首要下载highlight
下载地址:https://highlightjs.org/download/

下载解压后styles文件夹里边是风格款式。
2.接下来开端整合到编辑器
在/e/admin/ecmseditor/infoeditor/styles.js 代码中增加

{name:'PreformattedText',element:'pre'},

增加完后编辑器款式会多出一个Preformatted Text选项

在咱们需求运用代码高亮的当地运用Preformatted Text款式。
3.在需求运用代码高亮的模板中引进highlight。 能够调整款式在styles文件中,咱们这儿运用的是tomorrow-night-eighties.css款式。

<linkrel="stylesheet"type="text/css"href="[!--news.url--]skin/web/css/tomorrow-night-eighties.css"/>
<scripttype="text/javascript"src='[!--news.url--]skin/web/js/highlight.js'></script>//放在模板最底部
<scripttype="text/javascript">hljs.initHighlightingOnLoad();varallpre=document.getElementsByTagName("pre");for(i=0;i<allpre.length;i++){varonepre=document.getElementsByTagName("pre")[i];varmycode=document.getElementsByTagName("pre")[i].innerHTML;onepre.innerHTML='<codeid="mycode">'+mycode+'</code>';}</script>

至此插件整合完结。

声明:有的资源均来自网络转载,版权归原作者所有,如有侵犯到您的权益 请联系邮箱:123456@qq.com 我们将配合处理!

原文地址:帝国cms编辑器中使用代码高亮的方法发布于2022-07-06 07:44:14

相关推荐