嫩草研究院久久久精品 ,象鼻族无码一级A片在线播放,julia爆乳无码AV一区二区

　　帝國cms7.5版本內(nèi)置的文本編輯器是ckeditor，這款編輯器非常的強(qiáng)大，本身官網(wǎng)提供了幾百個(gè)可擴(kuò)展的插件，但帝國cms7.5內(nèi)置的ckeditor是沒有這些插件的，自然也沒有代碼高亮功能，如果我們需要添加代碼高亮功能，就必須安裝插件了。

　　安裝前：

　　安裝后：

　　以下是添加流程

　　一、整體操作步驟

　　1、添加擴(kuò)展插件codesnippet

　　2、修改ckeditor配置config.js

　　3、前端增加代碼高亮css樣式

　　步驟一：下載Code Snippet及三個(gè)依賴工具

　　官方下載地址

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

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

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

代碼高亮插件.zip

本地下載：

8789cbb094e50034f3e26c997d5eb66c.zip (218.35 KB)

　　將下載到的3個(gè)文件解壓出來，3個(gè)文件夾上傳到e/admin/ecmseditor/infoeditor/plugins/

　　步驟二：修改ckeditor配置config.js

　　修改帝國cms7.5編輯器配置文件e/admin/ecmseditor/infoeditor/config.js ，也就是在工具欄中加入Code Snippet(如圖二)的按鈕

　　需要修改三處：

　　1、增加擴(kuò)展配置，extraPlugins = 'codesnippet';

　　2、工具欄添加 CodeSnippet 功能

　　3、設(shè)置代碼高亮樣式

　　為方便，可直接將下面代碼覆蓋你的config.js代碼

　　代碼如下：
溫馨提示——有些人的config.js文件改動(dòng)后好像沒有任何反應(yīng)，我建議直接復(fù)制我下面的代碼然后覆蓋你的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添加代碼高亮功能已經(jīng)完成了

　　步驟三：前端增加代碼高亮css樣式

　　要到內(nèi)容頁模板中添加引用，添加到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>

　代碼說明：這個(gè)插件提供了多個(gè)前端css展示樣式，所有的樣式都在：e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles目錄里
以下是樣式

　　這里我選用的是monokai_sublime.css

　　具體可以到https://ckeditor.com/docs/ckeditor4/latest/examples/codesnippet.html#!/guide/dev_codesnippet在線預(yù)覽，然后將你喜歡的風(fēng)格引入到內(nèi)容頁模板head頭部即可。
瀏覽：

　　如果直接像上面去引用代碼的話，等于將你的后臺(tái)目錄赤裸裸的暴露在了外面，所以我建議將這兩個(gè)文件highlight.pack.js和monokai_sublime.css（隨自己選擇）復(fù)制一份放到其他目錄，再進(jìn)行引用。

　　我自己上放在了我的前端文件夾里，里面是我網(wǎng)站的所有前端相關(guān)代碼，

　　如下：

<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>

　這時(shí)雖然前臺(tái)文章中的代碼是高亮顯示了，但是并不能自適應(yīng)頁面大小，超出的部分將不顯示，以下解決代碼自動(dòng)換行

　　往自己引用的css中添加以下代碼，我引用的monokai_sublime.css，所以我這一步便是打開monokai_sublime.css

　　打開后，便可以看到.hljs{}代碼塊，自動(dòng)換行代碼的添加位置便

　　位于.hljs{}內(nèi)

　　添加內(nèi)容：

white-space: pre-wrap;

word-break: break-all;

//自動(dòng)換行

　　或改為

overflow-y: auto;
//當(dāng)代碼超出顯示區(qū)域?qū)⒆詭L動(dòng)條

我的修改效果

自此所以修改完成

　　本篇文章所展示的效果就是我修改后的效果。如喜歡這種風(fēng)格可以按這個(gè)步驟來修改，這里每一個(gè)步驟都很詳細(xì)了，千萬要閱讀每一個(gè)字，保證步驟不出錯(cuò)，才能修改成功。

在線下載列表

高這代碼下載

日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

帝國cms7.5系統(tǒng)內(nèi)置文本編輯器添加代碼高亮功能

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

答題星2018-06-03

全階人生考試2018-06-03

運(yùn)動(dòng)步數(shù)有氧達(dá)人2018-06-03

每日養(yǎng)生app2018-06-03

體育訓(xùn)練成績?cè)u(píng)定2018-06-03