HTML Lưu trữ - Share the best on internet

Học trọn bộ Front end

Website hay chuyên frontend và backend https://fullstack.edu.vn/

Cách cài đặt CKEditor 4

Các bạn truy cập trang chủ https://ckeditor.com/ckeditor-4/download/ Tùy chỉnh thanh toolbar https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic

<span style="font-family: arial, helvetica, sans-serif;"><script src="//cdn.ckeditor.com/4.6.2/full/ckeditor.js"></script>
<script>		
	CKEDITOR.replace('content', {
		height: 250,
		disallowedContent: 'a table tr td form input select script br' 
	
	});
	
	CKEDITOR.config.toolbarGroups = [
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
		{ name: 'forms', groups: [ 'forms' ] },
		{ name: 'styles', groups: [ 'styles' ] },
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		'/',
		{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
		{ name: 'links', groups: [ 'links' ] },
		{ name: 'insert', groups: [ 'insert' ] },
		{ name: 'colors', groups: [ 'colors' ] },
		{ name: 'tools', groups: [ 'tools' ] },
		'/',
		{ name: 'others', groups: [ 'others' ] },
		{ name: 'about', groups: [ 'about' ] }
	];	
 
 	CKEDITOR.config.removeButtons = 'Save,NewPage,ExportPdf,Preview,Print,Templates,Paste,PasteText,PasteFromWord,Scayt,SelectAll,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Language,Anchor,Flash,SpecialChar,Iframe,About,CreateDiv,Smiley,Superscript,Subscript,BidiRtl,BidiLtr,Styles,Undo,Redo,Replace,CopyFormatting,Cut,Copy';

  
 
	</script></span>

CKEDITOR.replace('content', {

height: 250,

disallowedContent: 'a table tr td form input select script br'

});

CKEDITOR.config.toolbarGroups = [

{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },

{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },

{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },

{ name: 'forms', groups: [ 'forms' ] },

{ name: 'styles', groups: [ 'styles' ] },

{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },

'/',

{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },

{ name: 'links', groups: [ 'links' ] },

{ name: 'insert', groups: [ 'insert' ] },

{ name: 'colors', groups: [ 'colors' ] },

{ name: 'tools', groups: [ 'tools' ] },

'/',

{ name: 'others', groups: [ 'others' ] },

{ name: 'about', groups: [ 'about' ] }

];

CKEDITOR.config.removeButtons = 'Save,NewPage,ExportPdf,Preview,Print,Templates,Paste,PasteText,PasteFromWord,Scayt,SelectAll,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Language,Anchor,Flash,SpecialChar,Iframe,About,CreateDiv,Smiley,Superscript,Subscript,BidiRtl,BidiLtr,Styles,Undo,Redo,Replace,CopyFormatting,Cut,Copy';

</script></span>

LOẠI BỎ CÁC SCRIPT QUẢNG CÁO, CÁC THUỘC TÍNH KHÔNG THEO NHU CẦU, CÓ THỂ CẤU HÌNH NHƯ BÊN DƯỚI

<span style="font-family: arial, helvetica, sans-serif;"><script src="https://cdn.ckeditor.com/4.6.2/full/ckeditor.js"></script>
<script>		
	CKEDITOR.replace('content', {
		height: 250,
		disallowedContent: 'a table tr td form input select script br',	
		allowedContent:'img[!src]{float}; b(*); p(*); em(*); u(*);span(*);'
	
	});
	CKEDITOR.config.toolbar = [    
		{ name: 'document', items : [ 'Source','-','DocProps','Preview','-','Templates' ] }, 
		{ name: 'clipboard', items : [ 'Cut','Copy','Paste','-','Undo','Redo' ] }, 
		{ name: 'editing', items : [ 'Find','Replace','-','SelectAll', ] },
		{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
		{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }					
	];				
	</script></span>

CKEDITOR.replace('content', {

height: 250,

disallowedContent: 'a table tr td form input select script br',

allowedContent:'img[!src]{float}; b(*); p(*); em(*); u(*);span(*);'

});

CKEDITOR.config.toolbar = [

{ name: 'document', items : [ 'Source','-','DocProps','Preview','-','Templates' ] },

{ name: 'clipboard', items : [ 'Cut','Copy','Paste','-','Undo','Redo' ] },

{ name: 'editing', items : [ 'Find','Replace','-','SelectAll', ] },

{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },

{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }

];

</script></span>

Chèn embed youtube hoặc iframe với responsive

2 năm ago by kaisanCSS

Các bạn làm theo hướng dẫn bên dưới Code CSS:

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.iframe-container{

position: relative;

width: 100%;

padding-bottom: 56.25%;

height: 0;

}

.iframe-container iframe{

position: absolute;

top:0;

left: 0;

width: 100%;

height: 100%;

}

Ví dụ:

 <style>
 .iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
 </style>
<div class="iframe-container"><iframe class="" width="560" height="315" src="https://www.youtube.com/embed/9YffrCViTVk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

<style>

.iframe-container{

position: relative;

width: 100%;

padding-bottom: 56.25%;

height: 0;

}

.iframe-container iframe{

position: absolute;

top:0;

left: 0;

width: 100%;

height: 100%;

}

</style>

Bài học về lâp trình plugin extensions trên trình duyệt chrome A – Z

3 năm ago by kaisanCSS

Để thành thạo các bạn cần có kiến thức liên quan, html, css, javascript Tài liệu liên quan đến các lệnh và hàm trong lập trình plugin extensions: https://developer.chrome.com/extensions/overview Các ví dụ: https://developer.chrome.com/apps/richNotifications Có thể học bằng cách tải các extensions của người khác về mổ… Read More