帝国cms7.5编辑器整合highlight web页面代码着色工具

highlight是一款web页面代码着色工具,魔优优交大家如何在帝国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>

至此插件整合完成。

    版权声明:

    本文内容如未注明原创皆转载自互联网,该文观点仅代表原作者本人,内容中图片等附件信息由原作者提供,本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至举报,一经查实,本站将立刻删除。

    为您推荐

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    0条评论

    //放在模板最底部