Ckeditor Add-Ons 중에 Simplebutton 의 기능을 확장하여 아래와 같이 글씨색, 테두리색, 배경색, 템플릿 등을 설정할수 있도록 개선하였습니다.
Button Normal Button gray Button halfmirror Button shiny Button Glossy Button lady
다양한 버튼 샘플 링크 다양한 버튼 샘플을 볼수 있는 링크로 연결해 드립니다.
Ckeditor Add-Ons 중에 Simplebutton 의 기능을 확장하여 아래와 같이 글씨색, 테두리색, 배경색, 템플릿 등을 설정할수 있도록 개선하였습니다.
Button Normal Button gray Button halfmirror Button shiny Button Glossy Button lady
다양한 버튼 샘플 링크 다양한 버튼 샘플을 볼수 있는 링크로 연결해 드립니다.
Templates 플러그인에서 템플릿을 선택하면 한순간에 모든 내용이 템플릿으로 전부 대체되어 난감할 수 있음
그래서 템플릿 다이알로그에서 기본 값을 체크해제 해 두고, 필요시에만 체크할 수 있도록 변경
{id:"chkInsertOpt",type:"checkbox",label:f.insertOption,"default":n.templates_replaceContent}
아래 처럼 default 값을 해제함
{id:"chkInsertOpt",type:"checkbox",label:f.insertOption,"":n.templates_replaceContent}
크롬에서는 포기
Internet Explorer 11 에서 보안 설정에 따라 이미지 업로드가 되는 것을 확인 함.
최대화를 기본으로 웹브라우저화면에 꽉차게 열어보기.
CKEDITOR.replace('ckeditor', { customConfig : 'config.js', width: '100%', height: '360', }); CKEDITOR.on('instanceReady',function( evt ){ var editor = evt.editor; editor.execCommand('maximize'); });
1. CKEditor 를 다운 받을 때 최적화된 코드로 다운받으면 코드 해석이 어렵게 됨. 최적화된 코드를 기준으로 추가된 항목을 확인하면 아래와 같다. xe/..../ckeditor/config.js
(function(){CKEDITOR.plugins.add("btgrid",{lang:"en,ru,fr,nl",requires:"widget,dialog",icons:"btgrid",init:function(b){var f=b.lang.btgrid;CKEDITOR.dialog.add("btgrid",this.path+"dialogs/btgrid.js");b.addContentsCss(this.path+"styles/editor.css");b.ui.addButton("btgrid",{label:f.createBtGrid,command:"btgrid",icon:this.path+"icons/btgrid.png"});b.widgets.add("btgrid",{allowedContent:"div(!btgrid);div(!row,!row-*);div(!col-*-*);div(!content)",requiredContent:"div(btgrid)",parts:{btgrid:"div.btgrid"},
editables:{content:""},template:'\x3cdiv class\x3d"btgrid"\x3e\x3c/div\x3e',dialog:"btgrid",defaults:{},upcast:function(a){return"div"==a.name&&a.hasClass("btgrid")},init:function(){var a=1,e=this.element.getChildCount();for(a;a<=e;a++)this.createEditable(12,a)},data:function(){if(this.data.colCount&&1>this.element.getChildCount())for(var a=this.data.colCount,e=this.data.rowCount,h=this.data.rowHeight,c=this.parts.btgrid,d=1;d<=e;d++)this.createGrid(a,c,d,h)},createGrid:function(a,e,c,h){for(var d='\x3cdiv class\x3d"row row-'+
c+'"\x3e',b=1;b<=a;b++)d=d+'\x3cdiv class\x3d"col col-md-'+12/a+'"\x3e \x3cdiv class\x3d"content" style="min-height:'+h+'em;"\x3e \x3cp\x3eCol '+b+" content area\x3c/p\x3e \x3c/div\x3e\x3c/div\x3e";e.appendHtml(d+"\x3c/div\x3e");this.createEditable(a,c)},createEditable:function(a,b){for(var c=1;c<=a;c++)this.initEditable("content"+b+c,{selector:".row-"+b+" \x3e div:nth-child("+c+") div.content"})}})}})})();
2. btgrid 플러그인 수정 ckeditor/plugins/btgrid/dialogs/btgrid.js
CKEDITOR.dialog.add("btgrid",function(d){function c(a){return function(){var b=this.getValue();(b=!!(CKEDITOR.dialog.validate.integer()(b)&&0<b))||alert(a);return b}}var b=d.lang.btgrid;return{title:b.editBtGrid,minWidth:240,minHeight:120,onShow:function(){var a=d.getSelection();a.getRanges();var b=this.getName(),c=this.getContentElement("info","rowCount"),e=this.getContentElement("info","colCount"),h=this.getContentElement("info","rowHeight");"btgrid"==b&&(a=a.getSelectedElement())&&(this.setupContent(a),c&&c.disable(),e&&e.disable())},contents:[{id:"info",
label:b.infoTab,accessKey:"I",elements:[{id:"colCount",type:"select",required:!0,label:b.selNumCols,items:[["2",2],["3",3],["4",4],["6",6],["12",12]],validate:c(b.numColsError),setup:function(a){this.setValue(a.data.colCount)},commit:function(a){a.setData("colCount",this.getValue())}},{id:"rowCount",type:"number",width:"50px",required:!0,label:b.genNrRows,validate:c(b.numRowsError),setup:function(a){this.setValue(a.data.rowCount)},commit:function(a){a.setData("rowCount",this.getValue())}},
{id:"rowHeight",type:"number",width:"50px",label:"줄높이입력",setup:function(a){this.setValue(a.data.rowHeight)},commit:function(a){a.setData("rowHeight",this.getValue())}}
]}]}});
CKeditor 의 Plugins 의 Dialog 상자 안에서 개별 field 요소(입력폼)의 값 변경시 다른 fields 요소(입력폼)에 영향을 끼쳐 원하는 값을 입력할 수 있도록 하는 방법입니다. - 아 설명이 이게 맞나? 아무튼 아래 그림으로 설명합니다.
위 이미지와 같이 하나의 입력 field 를 수정하면 다른 입력 field 도 같이 바뀌는 거죠.
{ type: 'number', id: 'input-all', label: '일괄적용', onChange: function() { this.getDialog().setValueOf("탭id", "input-왼쪽위", this.getValue()); this.getDialog().setValueOf("탭id", "input-오른쪽위", this.getValue()); this.getDialog().setValueOf("탭id", "input-왼쪽아래", this.getValue()); this.getDialog().setValueOf("탭id", "input-오른쪽아래", this.getValue()); } }
Bootstrap grid
https://ckeditor.com/cke4/addon/btgrid
Col 1 content area
Col 2 content area
Col 3 content area
XE 라이믹스에서는 관리자> 고급> 에디터> 공통설정> 추가 플러그인 로드 부분에 btgrid 추가
/btgrid/styles/editor.css 를 최종적으로 보여질 html 파일에도 넣어줘야 최종 화면에서 모양이 유지됨
XE 라이믹스 에서는 관리자>... 레이아웃> html/css> css 부분에 css파일을 import
@import url('//도메인/경로/ckeditor/plugins/btgrid/styles/editor.css');
<예시>
emoji 플러그인은 CKEditor 4.11.1 이상 버전에서 작동합니다.
연결되어 있는 아래의 모든 플러그인이 설치되어 있어야 작동합니다.
각각의 설치 방법은 아래 내용을 참고하세요.
아래 플러그인을 추가로 설치하세요.
emoji > 설치 경로 ../ckeditor/plugins/emoji
Autocomplete > 설치 경로 ..//ckeditor/plugins/autocomplete
Text Match > 설치 경로../ckeditor/plugins/textmatch
Ajax Data Loading > 설치 경로../ckeditor/plugins/ajax
Panel Button > 설치 경로../ckeditor/plugins/panelbutton
Floating Panel > 설치 경로../ckeditor/plugins/floatpanel
xml > 설치 경로../ckeditor/plugins/xml
../ckeditor/config.js 파일에 플러그인을 설정하고, 도구모음 아이콘을 등록하세요.
config.extraPlugins = 'emoji, textmatch, ajax, autocomplete, panelbutton, floatpanel, xml';
config.toolbar = [
{ name:'추가플러그인', items:['EmojiPanel'] }
];
각 설치 파일은 아래에서 다운받으세요.
첨부 '7' |
---|
CKEditor 스타일 리스트에 스타일 추가하기
ckeditor/styles.js 파일을 수정합니다.
CKEDITOR.stylesSet.add( 'default', [
{
name: 'r8 #999 default',
element: 'div',
styles: {
padding: '5px 10px',
background: '#999',
border: '1px solid #ccc',
'border-radius': '8px 8px 8px 8px'
}
},
] );
spacingsliders for ckeditor
다운로드> 여기클릭
설치 위치
> ckeditor/plugins/spacingsliders
설정 추가
> config.extraPlugins = 'spacingsliders';
CKEditor Plugins <Hkemoji>
다운로드 경로 > https://ckeditor.com/cke4/addon/hkemoji 또는 여기클릭
설치경로> ...ckeditor/plugins/hkemoji
[환경 설정]
ckeditor/config.js
config.extraPlugins = 'hkemoji';
config.toolbar = [
...
{ name: 'insert3', items: [ 'HKemoji' ] },
...
];
적용시 이미티콘 이름을 직접 지정해 줘야 하는 문제가 있어서 사용하지 않음
XE 에디터 컴포넌트의 이모티콘을 사용하면 동일한 구성이 가능함
코드스니펫 테마 변경합니다.
var cow = new Mammal( "moo", {
legs: 4
} );
하이구야
https://colorscripter.com/
..xe/common/css/bootstrap.min.css
pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:20px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
위 부분의 background-color:#f5f5f5; background-color:#808880;
code,pre{padding:0 3px 2px;font-family:Monaco, Menlo, Consolas, "Courier New", monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
code
https://maesiltea.iptime.org/zbxe/index.php?mid=diary&category=55728&document_srl=60365
이 게시판의 CKEditor에 적용한 웹폰트 목록입니다.
|
|
File Uploader by Uploadcare
출처 : https://ckeditor.com/cke4/addon/uploadcare
호환정보 : File Uploader by Uploadcare 3.0 ckeditor 4.9 / 4.8 / 4.7
구글드라이브, 플리커 등 클라우드 드라이브의 파일이나 이미지를 Ckeditor 에 삽입할 수 있게하는 플러그인입니다.
[설정 방법]
- 플러그인 업로드
.../ckeditor/plugins/uploadcare
- .../ckeditor/config.js 에 확장플러그인 등록
config.extraPlugins ='uploadcare';
- https://uploadcare.com/accounts/settings/ 에서 회원 가입 후 API Key 생성
구글계정으로 소셜 회원가입이 가능합니다. 가입하고 API 키를 선택해서 생성하면 됩니다.
- xe/modules/editor/skins/ckeditor/editor.html 맨 상단에 3. 에서 생성한 API Key 스크립트 추가
<script>
UPLOADCARE_PUBLIC_KEY = '7859a72cc41c660d0cb4';
</script>
- ../xe/modules/editor/skins/ckeditor/editor.html 맨 중간 아래 코드를 추가
// Initialize CKEditor settings.
var settings = {
// ..... ckeditor 툴바 설정 부분 하단에 아래 내용 추가...uploadcare: {
publicKey: '7859a72cc41c660d0cb4', // set your public API key here
multiple: true, // allow multi-file uploads
crop: '1:1,4:3', // set crop options when handling images
/* feel free to add more “object key” options here */
},}
File Uploader by Uploadcare 플러그인의 문제점이 있었으니 무료가 아니라는 것.
무료 버전은 저장공간 500MB, 이미지만 사용이 가능합니다.
PDF나 기타 파일의 업로드 등이 필요한 경우 유료버전(월 사용료)으로 전환해야 합니다.
★ 더 큰 문제는 클라우드에서 직접 파일을 링크하지 않는다는 거네요.
File Uploader by Uploadcare 에서 각 클라우드로 로그인하여 자료를 가져오고 이 자료가 File Uploader by Uploadcare 서버에 다시 업로드 되는 구조입니다. 결국 클라우드에 있던 자료가 File Uploader by Uploadcare 에 다시 올라가는 거죠. 이렇게 되면 비밀자료를 링크했을 경우 클라우드에 비공개로 보관되어 있던 자료까지 File Uploader by Uploadcare에 재 공유되고 있게 되겠네요.
저는 그저 가볍게 무료버전으로 클라우드 공개 이미지만 공유하는 목적으로 사용하기로 하였습니다.
다운로드 codesnippet_4.9.2.zip / 설치방법 Code Snippet _ CKEditor.pdf
원본출처 https://ckeditor.com/cke4/addon/codesnippet
본문에 코드를 삽입할 수 있게하고, 삽입된 코드는 각 언어에 따라 색상으로 명령을 구분해 줍니다.
[설치방법]
1. .../ckeditor/plugins/codesnippet 위치에 업로드
2. .../ckeditor/config.js 파일에 아래 내용 삽입
config.extraPlugins = 'codesnippet';
3. XE를 사용하는 경우 ...xe/modules/editor/skins/ckeditor/editor.html 에서 툴바 설정 추가toolbar: [
{ name: 'insert1', items: [ 'CodeSnippet' ] }
]
필요에 따라 댓글 툴바에도 설정 추가
첨부 '2' |
---|
xe/modules/board/skins/sketchbook5/css/m_editor.css
/* 모바일에서 에디터 툴바 문제 조치 - 아래 내용 추가 */
#cke_editor { display: none; }
https://xetown.com/qna/355441
/modules/board/m.skins/sketchbook5
여기서 write_form.html 와 _write_form_mobile.html
부분에서
{$oDocument->getEditor()} 나 {$commentt->getEditor()} 를 지움
저는 지우지는 않고
<!--@if(!Mobile::isMobileCheckByAgent())-->
<!--@end-->
이걸로 묵었습니다.
기진곰님 말씀대로 모바일때 표시가 달라지는 코드가 있던데 제대로 작동을 안하더라구요
스케치북 기준으로 스케치북 폴더에서 css/m_editor.css을 열어서
#cke_editor { display: none; }
이것을 추가해주는 것 입니닷.
툴바 관리자에게만 보이게
CKEditor4 에서 Templates 플러그인에 템플릿을 추가하는 방법입니다.
ckeditor/plugins/templates/templates/default.js 파일을 열어서 편집합니다.
CKEDITOR.addTemplates("default",{imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates")+"templates/images/"),templates:[{title:"Image and Title",image:"template1.gif",description:"One main image with a title and text that surround the image.",html:'\x3ch3\x3e\x3cimg src\x3d" " alt\x3d"" style\x3d"margin-right: 10px" height\x3d"100" width\x3d"100" align\x3d"left" /\x3eType the title here\x3c/h3\x3e\x3cp\x3eType the text here\x3c/p\x3e'},{title:"Strange Template",image:"template2.gif",description:"A template that defines two columns, each one with a title, and some text.",
html:'\x3ctable cellspacing\x3d"0" cellpadding\x3d"0" style\x3d"width:100%" border\x3d"0"\x3e\x3ctr\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 1\x3c/h3\x3e\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 2\x3c/h3\x3e\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3eText 1\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd\x3eText 2\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eMore text goes here.\x3c/p\x3e'},{title:"Text and Table",image:"template3.gif",description:"A title with some text and a table.",
html:'\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'},{title:"Text and Table 2",image:"template3.gif",description:"A title with some text and a table.",
html:'\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'}]});
{title:"왼쪽오렌지 바 라운드",image:"template3.gif",description:"왼족이 오렌색 바가 있는 필드셋 양식",html:'<fieldset style="BORDER-TOP: #ff9900 1px solid; BORDER-RIGHT: #ff9900 1px solid; BORDER-BOTTOM: #ff9900 1px solid; BORDER-LEFT: #ff9900 18px solid;border-radius:5px;">여기에 내용 입력</fieldset>'},{title:"웹소스 입력 양식",image:"template4.gif",description:"제목 출처 소스코드 입력 양식",html:'<p><span style="color: rgb(221, 221, 221);font-size: 26px;font-family: Paytone One, 맑은 고딕;">Title Input Title Here</span><br /><span style="font-family: Georgia,serif;font-size: 16px;"> LINK <span class="fav2"><i aria-hidden="true" class="fa fa-angle-double-right " style="color: rgb(255, 153, 0); font-size: 18px;" title="Angle Double Right "></i><span style="left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; position: absolute;">Angle Double Right </span></span> <span style="color: rgb(52, 152, 219);">Input URL Here</span></span></p></br><blockquote><p>source code here</p><p>...</p><hr style="color:#777;" /><table border="1" bordercolor="#777" cellpadding="0" cellspacing="0" style="width: 98%;"><tr><td bgcolor="#353535" style="width: 240px;"> </td><td bgcolor="#353535" style="width: 200px;"> </td><td bgcolor="#353535"> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></blockquote>'},{title:"탭모양 표 양식",image:"template5.gif",description:"탭 형태의 표 양식",html:'<table border="0" cellpadding="0" cellspacing="0" style="width:98%;"><tr><td style="width: 300px;"><div style="background: rgb(255, 153, 0); border-radius: 10px 20px 0px 0px; border: 1px solid rgb(255, 153, 0); padding: 5px 10px; text-align: center;"><strong><span style="color:#4e5f70;font-family:맑은 고딕;font-size:18px;">여기에 제목 입력</span></strong></div></td><td> </td></tr><tr><td colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="height:100%;width:100%;border-style:solid;border-top-width: medium;border-bottom-width: medium;border-left-width: 20px;border-right-width: medium;border-color:#ff9900;border-radius:0px 5px 5px 5px;"><tr><td><p> 여기에 본문을 입력</p><p> </p></td></tr></table></td></tr></table>'}
세번째 템플릿 수정
{title:"왼쪽오렌지 바 라운드",image:"template3.gif",description:"A title with some text and a table.",
html:'<fieldset style="BORDER-TOP: #ff9900 1px solid; BORDER-RIGHT: #ff9900 1px solid; BORDER-BOTTOM: #ff9900 1px solid; BORDER-LEFT: #ff9900 18px solid;border-radius:5px;">여기에 내용 입력</fieldset>'}
ckeditor/styles.js
{
name: 'Special Container',
element: 'div',
styles: {
padding: '5px 10px',
background: '#eee',
border: '1px solid #ccc'
}
},{
name: 'r8 #999 default',
element: 'div',
styles: {
padding: '5px 10px',
background: '#999',
border: '1px solid #ccc',
'border-radius': '8px 8px 8px 8px'
}
},
{
name: 'left Blue Bar Container',
element: 'div',
styles: {
padding: '4px 4px 4px 14px',
margin: '6px 6px 20px',
background: '#999',
color: '#ddd',
'box-sizing': 'border-box',
'line-height': '1.4',
'font-size': '15px',
'border-left': '6px double #5BBFD9',
'border-radius': '6px 6px 6px 6px'
}
},
https://www.blueb.co.kr/?c=1/5&cat=%25EC%2583%2589%25EC%2583%2581&uid=916
색상 중간단계 계산