您现在的位置: 首页 > 帝国系统 > 正文 帝国系统

帝国cms7.5系统内置文本编辑器添加代码高亮功能

2020-04-27【帝国系统】人已阅读

简介帝国cms7.5版本内置的文本编辑器是ckeditor,这款编辑器非常的强大,本身官网提供了几百个可扩展的插件, 但帝国cms7.5内置的ckeditor是没有这些插件的,自然也没有代码高亮功能,如果我们需要添加代码高亮功能,就必须安装插件了。

  帝国cms7.5版本内置的文本编辑器是ckeditor,这款编辑器非常的强大,本身官网提供了几百个可扩展的插件, 但帝国cms7.5内置的ckeditor是没有这些插件的,自然也没有代码高亮功能,如果我们需要添加代码高亮功能,就必须安装插件了。

  安装前:

帝国cms7.5系统内置文本编辑器添加代码高亮功能

  安装后:

帝国cms7.5系统内置文本编辑器添加代码高亮功能

帝国cms7.5系统内置文本编辑器添加代码高亮功能

  以下是添加流程

  一、整体操作步骤

  1、添加扩展插件codesnippet

  2、修改ckeditor配置config.js

  3、前端增加代码高亮css样式

  步骤一:下载Code Snippet及三个依赖工具

  官方下载地址

  Code Snippet下载地址: https://ckeditor.com/cke4/addon/codesnippet

  Widget下载地址: https://ckeditor.com/cke4/addon/widget

  Line下载地址: Utilities https://ckeditor.com/cke4/addon/lineutils

  本地下载:代码高亮插件.zip

  将下载到的3个文件解压出来,3个文件夹上传到e/admin/ecmseditor/infoeditor/plugins/

       帝国cms7.5系统内置文本编辑器添加代码高亮功能

  步骤二:修改ckeditor配置config.js

  修改帝国cms7.5编辑器配置文件e/admin/ecmseditor/infoeditor/config.js ,也就是在工具栏中加入Code Snippet(如图二)的按钮

  需要修改三处:

  1、增加扩展配置,extraPlugins = 'codesnippet';

  2、 工具栏添加 CodeSnippet 功能

  3、 设置代码高亮样式

  为方便,可直接将下面代码覆盖你的config.js代码

  代码如下:
     

function EcmsEditorDoCKhtml(htmlstr){
	if(htmlstr.indexOf('"')!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("'")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("/")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("[")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("]")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf(":")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("%")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("<")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf(">")!=-1)
	{
		return '';
	}
	return htmlstr;
}

function EcmsEditorGetCs(){
	var js=document.getElementsByTagName("script");
	for(var i=0;i<js.length;i++)
	{
		if(js[i].src.indexOf("ckeditor.js")>=0)
		{
			var arraytemp=new Array();
			arraytemp=js[i].src.split('?');
			return arraytemp;
		}
	}
}

var arraycs=new Array();
arraycs=EcmsEditorGetCs();

arraycs[0]=arraycs[0].replace('infoeditor/ckeditor.js','');

arraycs[1]=document.getElementById('doecmseditor_eaddcs').value;
arraycs[1]=EcmsEditorDoCKhtml(arraycs[1]);


CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	
	config.filebrowserImageUploadUrl = '';
	config.filebrowserFlashUploadUrl = arraycs[0];
	config.filebrowserImageBrowseUrl = arraycs[1];
	config.filebrowserFlashBrowseUrl = arraycs[1];
	
	config.enterMode = CKEDITOR.ENTER_BR;
	config.shiftEnterMode = CKEDITOR.ENTER_P;

	config.allowedContent= true;
	
	config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;
	
	// Toolbar
	config.toolbar_full = [
	{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Preview', 'Print' ] },
	{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
	
	{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
	'/',
	{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat', 'ecleanalltext', 'autoformat' ] },
	
	{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
	{ name: 'insert', items: [ 'Image', 'etranmore', 'Flash', 'etranmedia', 'etranfile', '-', 'Table', 'HorizontalRule', 'SpecialChar', 'equotetext', 'einserttime', 'einsertpage', 'einsertbr' ,'CodeSnippet'] },
	'/',
	{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
	{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
	{ name: 'tools', items: [ 'ShowBlocks', 'NewPage', 'Templates' ] },
	{ name: 'others', items: [ '-' ] },
	{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', 'Maximize' ] }
];


	// Toolbar
	config.toolbar_basic = [
	{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
	{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
	{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
	{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
	{ name: 'tools', items: [ 'Maximize' ] },
	{ name: 'others', items: [ '-' ] },
	'/',
	{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
	{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
	{ name: 'styles', items: [ 'Styles', 'Format' ] }
];


	config.extraPlugins = 'etranfile,etranmedia,etranmore,autoformat,ecleanalltext,einsertbr,einsertpage,einserttime,equotetext,codesnippet';
	
	
	config.toolbar = 'full';
	
	config.codeSnippet_theme= 'mono-blue';
	
};

  至此,ckeditor添加代码高亮功能已经完成了

  步骤三:前端增加代码高亮css样式

  要到内容页模板中添加引用,添加到html的<head></head>头部即可,以下是代码

    <link href="[!--new.url--]e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" rel="stylesheet">
    <script src="[!--new.url--]e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script> 
    <script>hljs.initHighlightingOnLoad();</script>

 代码说明:这个插件提供了多个前端css展示样式,所有的样式都在:e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles目录里
       以下是样式

帝国cms7.5系统内置文本编辑器添加代码高亮功能

  这里我选用的是monokai_sublime.css

  具体可以到https://ckeditor.com/docs/ckeditor4/latest/examples/codesnippet.html#!/guide/dev_codesnippet在线预览,然后将你喜欢的风格引入到内容页模板head头部即可。
       浏览:

帝国cms7.5系统内置文本编辑器添加代码高亮功能

  如果直接像上面去引用代码的话,等于将你的后台目录赤裸裸的暴露在了外面,所以我建议将这两个文件highlight.pack.js和monokai_sublime.css(随自己选择)复制一份放到其他目录,再进行引用。

  我自己上放在了我的前端文件夹里,里面是我网站的所有前端相关代码,

  如下:

<link href="[!--news.url--]static/css/monokai_sublime.css" rel="stylesheet">
<script src="[!--news.url--]static/js/highlight.pack.js"></script> 
<script>hljs.initHighlightingOnLoad();</script>

    这时虽然前台文章中的代码是高亮显示了,但是并不能自适应页面大小,超出的部分将不显示,以下解决代码自动换行

  往自己引用的css中添加以下代码,我引用的monokai_sublime.css

  添加位置

  位于.hljs{}内

  添加内容:

white-space: pre-wrap;

word-break: break-all;

//自动换行

  或改为

overflow-y: auto;
//当代码超出显示区域将自带滚动条

    我的修改效果

帝国cms7.5系统内置文本编辑器添加代码高亮功能

       自此所以修改完成

  本篇文章所展示的效果就是我修改后的效果。如喜欢这种风格可以按这个步骤来修改。

很赞哦! ()

文章评论

站点信息

  • 网站运行
  • 建站时间:2019-8-5
  • 网站名称:轻语分享
  • 网站域名:www.caihonggudu.cn
  • 关于博主个人简介
  • 文章统计44篇文章
  • 标签管理全部标签
  • 联系QQ2716827033
  • 统计数据
  • 微信公众号:扫描二维码,关注我