/*
* jQuery UI Progressbar 1.7.1
*
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI/Progressbar
*
* Depends:
* ui.core.js
*/
(function($) {
$.widget("ui.editor", {
_init: function() {
this._initIframe();
},
destroy: function() {
this.element.empty();
$.widget.prototype.destroy.apply(this, arguments);
},
//===================================================================================================================================
// private Methods
_initIframe:function(){
var self = this;
var opts = self.options;
self.element.find('textarea').hide();
var css = "body{background:transparent;font:12px '돋움',dotum,AppleGothic,sans-serif;line-height:1.5;margin:0px;word-wrap:break-word;word-break:break-all;} p{margin:0;padding:0;line-height:1.5}";
if($.browser.msie){
css += ".multimedia{border:dotted 1px #d1d1d1;background:#333333 url(http://nbimg.nexon.com/Blog/icon/bul_arr_ora5.gif) no-repeat center center;display:block;}";
}
//UI 동적으로 붙이기 (전체 UI, 레이어 메뉴 UI)
self.element.append($.ajax({ url: "/commonweb/js/jquery/nb/editorUI/editorSec.tpl", async: false }).responseText);
opts._$editorSec = self.element.find("div.editorSec")
.append("")
.append("");
opts._$iFrame = opts._$editorSec.find("iframe");
opts._iFrameDoc = opts._$iFrame.contents()[0];
opts._iFrameDoc.designMode = 'on';
opts._iFrameDoc.open();
opts._iFrameDoc.write('');
opts._iFrameDoc.write('');
opts._iFrameDoc.write('');
opts._iFrameDoc.write("");
opts._iFrameDoc.close();
opts._iFrameDoc.contentEditable = 'true';
var bodyRightMargin = opts._$editorSec.width()-opts.width;
if($.browser.msie) bodyRightMargin -= 15;
$(opts._iFrameDoc).find('body').css('margin-right',bodyRightMargin); //에디터 감싸는 영역과, iframe영역의 넓이 차만큼 iframe body에 패딩을 넣는다.
opts._$iFrame.css('padding',opts.iframePadding).width(opts._$editorSec.width()-opts.iframePadding*2);
if(!opts.toolbar){ // text mode 즉, no toolbar
self.element.find("div.editortoolbar").hide();
opts._$iFrame.height( opts.textModeHeight == 0 ? opts._$editorSec.height() : opts.textModeHeight );
}
else{//editor mode, 즉 toolbar
var etb = self.element.find("div.editortoolbar").show();
if(!opts.useByulAlbum)
etb.find('img.balbum').hide();
opts._$iFrame.height( opts.editorModeHeight == 0 ? opts._$editorSec.height() : opts.editorModeHeight );
}
// IE의 경우 엔터키를 누르면 P테그가 생기는데, 이를 br로 바꿔준다.
// ** 가운데 정렬등의 명령을 수행할때, IE에서는 P테그를 없애면,
// 전체 정렬이 돼버리는 문제가 있어서 이놈 적용 안함. 2009.09.23
// $(opts._iFrameDoc).keydown(function( event ) {
// if ( $.browser.msie && event.keyCode == 13 ){
// var rng = self._getRange();
// rng.pasteHTML('
');
// rng.collapse(false);
// rng.select();
// return false;
// }
// });
// 에디터 영역 늘이기 기능
opts._$editorSec.find("div.resizehandler").bind("mousedown",function(e){
var initPos = e.pageY;
var newh;
var $cover = $('').appendTo(opts._$editorSec);
$cover.css({
width:opts._$editorSec.width(),
height:opts._$editorSec.height()-$(this).height(),
position: 'absolute',
left : 0,
top : 0
, backgroundColor:'#ffffff'
, opacity:0.1
});
$(document).bind("mousemove",function(e){
newh = opts._$iFrame.height() + (e.pageY-initPos);
opts._$iFrame.height(newh);
$cover.height(newh);
initPos = e.pageY;
//$(document).bind("dragstart", function(){return false;});
//$(document).bind("selectstart", function(){return false;});
}).bind("mouseup",function(e){
$(document).unbind("mousemove").unbind("dragstart").unbind("selectstart");
$cover.remove();
});
}).dblclick( function(){
opts._$iFrame.height(opts._iFrameDoc.body.scrollHeight + 50);
} );
// 툴바 처리
// mouse over out 처리
var $toolbar = self.element.find("div.editortoolbar");
// IE의 경우 레이어메뉴를 클릭하면 selection이 없어지는데, 이를 위해 별도 저장한 다음 필요시 사용한다.
if ($.browser.msie) {
opts._$iFrame.contents().bind('click', function() {
opts.selection = opts._iFrameDoc.selection.createRange();
});
opts._$iFrame.contents().bind('dblclick', function() {
opts.selection = opts._iFrameDoc.selection.createRange();
});
// IE는 툴바를 클릭하면 ifame에서 포커스를 잃어 버린다. 명령 실행전 반드시 포커스를 잡아줘야 한다.
$toolbar.find('img').click(function(){
opts._$iFrame[0].contentWindow.focus();
opts.selection = opts._iFrameDoc.selection.createRange();
});
}
if(opts.useHtmlMode){
var $textarea = $('').appendTo(opts._$editorSec);
$textarea.width(opts.width);
$textarea.height(400);
$toolbar.find('.editorModeBt').show().toggle(
function(){
$textarea.val( $(opts._iFrameDoc).find('body').html() );
opts._$iFrame.hide();
$textarea.show();
opts.mode = 2
},
function(){
$(opts._iFrameDoc).find('body').html($textarea.val( ));
$textarea.hide();
opts._$iFrame.show();
opts.mode = 1
});
}
$toolbar.find("img").not(":first").each(function(){
$(this).hover(
function(){
var newSrc = $(this).attr("src").replace(/_out/, "_over");
$(this).attr("src", newSrc);
},
function(){
var newSrc = $(this).attr("src").replace(/_over/, "_out");
$(this).attr("src", newSrc);
}
);
});
// 툴바에서 바로 실행시키는 메뉴의 경우 이 놈이 일괄 처리.
$toolbar.find("img[cmdtype=1]").click(function(){
opts._$iFrame[0].contentWindow.focus();
opts._iFrameDoc.execCommand($(this).attr("cmd"),false, null);
});
// 글꼴메뉴 처리-----------------------------------------------------
var $layerFontFamily = self.element.find("div.layerFontFamily").hide();
$toolbar.find("img[cmd=fontfamily]").click(function(event){
self._showMenuLayer(event, $layerFontFamily);
});
$layerFontFamily.find("li>a").each(function(i){
var a = this;
$(a).bind("click", function(event){
self._executeOnLayer('fontname', $(a).attr("fontname"), $layerFontFamily);
});
});
// 폰트 색상 처리-----------------------------------------------------
var $layerFontColor = self.element.find("div.layerFontColor").hide();
$toolbar.find("img[cmd=forecolor]").click(function(event){
self._showMenuLayer(event, $layerFontColor);
});
var $colorInput = $layerFontColor.find("input:text:eq(0)");
var $colorButton = $layerFontColor.find("img:eq(0)");
$layerFontColor.find("li>a").each(function(i){
var a = this;
$(a).bind("click", function(event){
self._executeOnLayer('forecolor', $(a).css("background-color"), $layerFontColor);
}).mouseover(function(){
$colorInput.val($(a).css("background-color"));
$layerFontColor.find("p>a").css("background-color",$(a).css("background-color"));
});
});
$colorButton.click(function(){
self._executeOnLayer('forecolor', $colorInput.val(), $layerFontColor);
})
// 이모티콘 처리 ---------------------------------------------------
var $layerEmoticon = self.element.find("div.layerEmoticon").hide();
$toolbar.find("img[cmd=emoticon]").click(function(event){
if ( ($.browser.msie && !opts.selection) ){
alert("편집할 에디터 영역을 먼저 선택해 주세요.");
return false;
}
self._showMenuLayer(event, $layerEmoticon);
});
$layerEmoticon.find("li>img").each(function(i){
var img = this;
$(img).bind("click", function(event){
self._insertHTML( "![](" + $(img).attr("src") + ")
", $layerEmoticon );
});
});
// 멀티미디어 처리 ---------------------------------------------------
var $layerMulti = self.element.find("div.layerMulti").hide();
$toolbar.find("img[cmd=multimedia]").click(function(event){
if ( ($.browser.msie && !opts.selection) ){
alert("편집할 에디터 영역을 먼저 선택해 주세요.");
return false;
}
self._showMenuLayer(event, $layerMulti);
});
$layerMulti.find("input:radio:eq(0)").click(function(){
$layerMulti.find("dl.multi3").hide();
$layerMulti.find("dl.multi2").show();
});
$layerMulti.find("input:radio:eq(1)").click(function(){
$layerMulti.find("dl.multi2").hide();
$layerMulti.find("dl.multi3").show();
});
$layerMulti.find("div.popCloseBt > img").add("div.popBt img[alt=취소]").click(function(){$layerMulti.hide();});
$layerMulti.find("div.popBt img[alt=확인]").click(function(){
var MMType = $layerMulti.find("input:radio:checked").val();
if(MMType=="source"){ //주소복사로 붙여넣기.
var inputVal = $.trim($layerMulti.find("dl.multi2 input:eq(0)").val());
if(inputVal.length < 1 || inputVal.toLowerCase()=="http://" ){
alert("첨부하실 멀티미디어 코드를 입력해주세요.");
return;
}
var html = self._getMovieTemplate( inputVal );
}else{ // object 코드 직접입력
html = $.trim($layerMulti.find("dl.multi3 textarea:eq(0)").val());
if(html.length < 1){
alert("첨부하실 멀티미디어 코드를 입력해주세요.");
return;
}
var mediatype = 'object';
if(!(new RegExp("^$", "i").test(html))){
//editorutil.writedebug('object 태그가 아님');
if(!(new RegExp("^$", "i").test(html))){
//editorutil.writedebug('embed 태그가 아님');
alert("멀티미디어 태그가 올바르지 않습니다.");
return;
}else{
mediatype = 'embed';
}
}
//temp$(this.editor.id + 'multimediasource').value = '';
// if($.browser.msie){
// var height = $(html).find("embed").height();//this.getmoviesize(html);
// var width = $(html).find("embed").width();
// html = html.substring(0, html.toLowerCase().indexOf("")) + '';
// }
}
self._insertHTML(html, $layerMulti);
});
// 링크 처리 ---------------------------------------------------
var $layerLink = self.element.find("div.layerLink").hide();
$toolbar.find("img[cmd=createLink]").click(function(event){
if ( ($.browser.msie && !opts.selection) ){
alert("편집할 에디터 영역을 먼저 선택해 주세요.");
return false;
}
self._showMenuLayer(event, $layerLink);
});
$layerLink.find("div.popCloseBt > img").add("div.popBt img[alt=취소]").click(function(){$layerLink.hide();});
$layerLink.find("div.popBt img[alt=확인]").click(function(){
var linkVal = $layerLink.find("dl.link input:text:eq(0)").val();
if(linkVal.length < 1 || linkVal.toLowerCase()=="http://" ){
alert("링크하실 주소를 입력해 주세요.");
return;
}
self._executeOnLayer('createLink', linkVal, $layerLink);
//self._insertHTML(html, $layerMulti);
});
// 이미지 업로드 처리 ---------------------------------------------------
$toolbar.find("img[cmd=image]").click(function(event){
if ( ($.browser.msie && !opts.selection) ){
alert("편집할 에디터 영역을 먼저 선택해 주세요.");
return false;
}
if($.ui.editor.imageWindow)
$.ui.editor.imageWindow.close();
if($.ui.editor.imageWindowCallback==null){
$.ui.editor.imageWindowCallback = function (filename, filesize, thumbname, thumsize) {
opts.images.push(filename);
var imgTag = "![\"크게보기\"](" + jQuery.FileSystem.GetBBSUrl( filename ) + ")
"
self._insertHTML(imgTag, null);
};
}
if($.browser.msie)
$.ui.editor.imageWindow = window.open("/Isolation/File/ImageEditor.html?callback=jQuery.ui.editor.imageWindowCallback&urlcallback=", "imageeditor", "width=500, height=500");
else
$.ui.editor.imageWindow = window.open( '/Isolation/File/ImageUploader.aspx?Callback=jQuery.ui.editor.imageWindowCallback&urlcallback=', 'imageeditor', 'width=460,height=510');
});
if(opts.useByulAlbum){
//별앨범 처리 -----------------------------------------------------------------
var $layerAlbum = self.element.find("div.layerImage1").hide().data("selectedAlbumItems",[]);
$toolbar.find("img[cmd=album]").click(function(event){
if ( ($.browser.msie && !opts.selection) ){
alert("편집할 에디터 영역을 먼저 선택해 주세요.");
return false;
}
$layerAlbum.data('selectedAlbumItems').length = 0;
// 페이저 붙이기
$layerAlbum.find("div.pageSec").pager({
buttonType:2
,pagerCN:""
,pagerSize:10
,pageSize:4
,change:function(pn){
self._GetListAlbum(pn,event);
}
});
$layerAlbum.find("div.pageSec").pager('setPageNo', 1);
self._GetListAlbum(1, event);
});
// 앨범창 닫기 및 초기화
$layerAlbum.find("div.popCloseBt a.close,div.popBt2 a.cancel").click(function(){
//$layerAlbum.data('selectedAlbumItems').length = 0;
$layerAlbum.find('span.selectedNo').html(0);
$layerAlbum.hide(); return false;
});
$layerAlbum.find('a.deselectAll').click(function(){
$layerAlbum.data('selectedAlbumItems').length = 0;
$layerAlbum.find('span.selectedNo').html(0);
$layerAlbum.find('ul.tplAlbumContainer li').removeClass('selected');
return false;
});
// 앨범 올리기 버튼
if(!$.browser.msie){ // ie가 아니면 편집후올리기 버튼 숨기기
$layerAlbum.find('div.popBt2 a.sendToImageEditor').hide();
}
$layerAlbum.find("div.popBt2").find('a.send').click(function(){
var data = $layerAlbum.data('selectedAlbumItems');
for(var i=0;i"
self._insertHTML(imgTag, null);
}
$layerAlbum.find("div.popCloseBt a.close").trigger('click');// 앨범 닫기 및 초기화 호출
}).end().find('a.sendToImageEditor').click(function(){
if($.browser.msie){
var data = $layerAlbum.data('selectedAlbumItems');
var aiu = [];
if(data.length < 1) {
alert('선택된 이미지가 없어요.');
return false;
}
if($.ui.editor.imageWindowCallback==null){
$.ui.editor.imageWindowCallback = function (filename, filesize, thumbname, thumsize) {
opts.images.push(filename);
var imgTag = "
"
self._insertHTML(imgTag, null);
};
}
if($.ui.editor.AlbumImageWindow)
$.ui.editor.AlbumImageWindow.close();
$.ui.editor.AlbumImageWindowCallback = function () {
for(var i=0; i 0){
self.setContent(opts.content);
}
self.element.find("iframe")[0].contentWindow.focus();
// 또, IE는 내용이 있으면 body에 포커스가 안 먹는다 ㅡㅡ;;;;;;;;;;
// IE의 경우는 위의 코드로는 안 먹는다 ㅡㅡ;;;;
if(opts.content.length == 0)
self.element.find("iframe")[0].contentWindow.document.body.focus();
}, //===================================================================================================================================
// 레이어를 통해서 명령을 내리는 경우 execCommand를 이 놈이 대행한다.
_executeOnLayer : function(cmd, value, $layer){
var self = this;
var opts = self.options;
opts._$iFrame[0].contentWindow.focus();
if(opts.selection)
opts.selection.select();
switch(cmd){
case "createLink" :
opts._iFrameDoc.execCommand("unlink", false, []);
default :
opts._iFrameDoc.execCommand(cmd, false, value);
break;
}
$layer.hide();
},
// 이모티콘, 멀티미디어와 같은 내용 추가 명령어 처리 시
_insertHTML : function(value, $layer){
var self = this;
var opts = self.options;
opts._$iFrame[0].contentWindow.focus();
if ( $.browser.msie ){
opts.selection.pasteHTML(value);
}else{
opts._iFrameDoc.execCommand('inserthtml', false, value);
}
if ($layer)
$layer.hide();
// 이미지를 추가할 경우 폭이 너무 넓어지는 것을 막기 위해 사이즈 제한을 건다.
// 브라우저 별로 이미지 로딩 타임이 달라, width 체크 시점에서 차이가 있어 둘다 처리한다.
var maxImgWidth = opts.width-opts.iframePadding*2;
$(opts._iFrameDoc).find("body img[src$=ashx]").each(function(){
if($(this).width()> maxImgWidth){
$(this).width(maxImgWidth);
};
});
// ie에서는 로드시점에 해줘야 한다.
$(opts._iFrameDoc).find("body img[src$=ashx]").load(function(){
if($(this).width()>maxImgWidth){
$(this).width(maxImgWidth);
};
});
},
// 레이어를 open 시키는 버튼이 눌리면 이놈이 레이어 메뉴를 열어준다.
_showMenuLayer : function(event, $layer){
this._hideAllLayer();
var self = this;
var opts = self.options;
$layer.show();
// 메뉴 영역 밖을 클릭하면
$(opts._iFrameDoc).find("body").one("click", function(){
$layer.hide();
});
event.stopPropagation();
},
_hideAllLayer : function(){
this.element.find("div.layerFontFamily").hide();
this.element.find("div.layerFontColor").hide();
this.element.find("div.layerEmoticon").hide();
this.element.find("div.layerMulti").hide();
this.element.find("div.layerLink").hide();
this.element.find("div.layerImage1").hide();
},
_getSelection : function(){
return ( window.getSelection ) ? window.getSelection() : document.selection;
},
_getRange : function(){
var selection = this._getSelection();
if ( !( selection ) )
return null;
return ( selection.rangeCount > 0 ) ? selection.getRangeAt(0) : selection.createRange();
},
//------------------------------- 앨범 페이지 메소드 처리 --------------------
_GetListAlbum : function(pageNo, event){
var $layerAlbum = this.element.find("div.layerImage1")
var $pagerSec = $layerAlbum.find('div.pageSec');
PageMethods.GetListAlbum(
SlogInfo.SlogUrl
, $pagerSec.pager('getPageNo')
, $pagerSec.pager('getPageSize')
, this._OnSuccessGetListAlbum
, this._OnFailGetListAlbum
, {"toid":window.setTimeout(function() { $layerAlbum.block(); }, 500), "base": $layerAlbum, "self":this, "event":event}
);
},
_OnSuccessGetListAlbum : function (results, context, methodName){
window.clearTimeout(context.toid);
context.base.unblock();
var $AlbumList = context.base.find("ul.tplAlbumContainer")
$AlbumList.setTemplateURL('/CommonWeb/js/jquery/nb/editorui/album.tpl', null, { filter_data: false });
$AlbumList.processTemplate(results.Records);
var data = context.base.data("selectedAlbumItems");
$AlbumList.find('li').each(function(i){
// 선택된 놈들 표시
for(var j=0;j < data.length; j++){
if(results.Records[i].ArticleFile == data[j]){
$(this).addClass('selected');
break;
}
}
$(this).click(
function(){
if(data.length >= 8){
alert('앨범은 8개까지 추가하실 수 있습니다.');
return false;
}
if($(this).hasClass('selected') ){
for(var j=0;j < data.length; j++){
if(results.Records[i].ArticleFile == data[j]){
data.splice(j, 1);
break;
}
}
$(this).removeClass('selected');
}else{
$(this).addClass('selected');
data.push(results.Records[i].ArticleFile);
}
context.base.find('span.selectedNo').html(data.length);
}
);// end of click
});// end of each
context.base.find("div.pageSec").pager("render", results.CntTotal);
context.self._showMenuLayer(context.event, context.base);
},
_OnFailGetListAlbum : function(error, context, methodName) {
window.clearTimeout(context.toid);
context.base.unblock();
ModalPopup.Info(error.get_message());
},
//-------------------------------Util 함수--------------------------------
_getMovieTemplate : function(url){
var html = "";
if(url.indexOf("mncast.com") > 0){
html += "";
} else if(url.indexOf("youtube.com") > 0){
if(url.indexOf("watch?v=") > 0) {
url = url.replace("watch?v=", "v/");
}
html += "";
} else if(url.indexOf("daum.net") > 0){
html += "";
} else if(url.indexOf("tagstory.com") > 0) {
html += "";
} else if(url.indexOf("mgoon.com") > 0) {
html += "";
}else if (url.indexOf("http://203.246.165.114") >= 0){
html += "";
} else {
html += "";
}
var mediatype = 'embed';
// if($.browser.msie){
// var height = $(html).find("embed").height();//this.getmoviesize(html);
// var width = $(html).find("embed").width();
// html = html.substring(0, html.toLowerCase().indexOf("")) + '';
// }
return html;
},
// _removeScript : function(string) {
// var objStrip = new RegExp();
// objStrip = /]*>(.*?)<\/script>/i;
// return string.replace(objStrip, "");
// },
//
// _removeStyle : function(string) {
// var objStrip = new RegExp();
// objStrip = /]*>(.*?)<\/style>/i;
// return string.replace(objStrip, "");
// },
//--------------------------public methods---------------------------------
// getter ----------------------------------------------------------------
getContent : function(){
var self = this;
var opts = self.options;
// var cnts = $(opts._iFrameDoc.body).find('script, style, :hidden, input[type=hidden]').remove().end()
// .find(':hidden').remove().end()
// .find('*').unbind().attr('id','').attr('class','').end()
// .html();
if(opts.filterHtmlTags){
$(opts._iFrameDoc).find('body *').each(function(i){
if(
$(this).is('script')
||$(this).is('style')
//||$(this).is(':hidden')
||$(this).is('input[type=hidden]')
||$(this).css('display')=='none'
||$(this).is('.displayNone')
){
$(this).remove();
}else{
$(this).unbind().attr('id','').attr('class','');
if($(this).is('form')){
$(this).next().before( $(this).html() );
$(this).remove();
}
}
});
return $(opts._iFrameDoc.body).html();
} else { // htmlmode인 경우, textarea의 내용을 그대로 리턴.
if(opts.mode == 2){
var $textarea = opts._$editorSec.find('textarea.editortext');
return $textarea.val();
}else{
return $(opts._iFrameDoc.body).html();
}
}
},
// 첨부된 이미지 파일명 array
getImages : function(){
return this.options.images;
},
// setter ----------------------------------------------------------------
setContent : function(content){
var self = this;
var opts = self.options;
var cnts = $(opts._iFrameDoc).find('body').html(content);
},
setHeight : function(height){
var self = this;
self.options._$iFrame.height(height);
},
showToolbar : function(){
var self = this;
if(self.options._$iFrame.height() < 200){
self.options._$iFrame.height(self.options.editorModeHeight);
}
self.element.find("div.editortoolbar").show();
},
hideToolbar : function(){
var self = this;
self.element.find("div.editortoolbar").hide();
}
});
$.extend($.ui.editor, {
version: "0.1.0"
//,editorSec : ""
//,fontFamily : ""
,getter:"getContent, getImages"
,imageWindow : null
,imageWindowCallback : null
,AlbumImageWindow : null
,AlbumImageWindowCallback : null
,defaults: {
//width: 450
toolbar:false // 툴바 노출 할지
,mode:1 // 1:디자인모드, 2:html 모드
,filterHtmlTags:true
,useHtmlMode : false // 디자인, html 모드 변경 버튼 노출할지 여부
,useByulAlbum:true // 별앨범 연동 할지
,textModeHeight: 60
,editorModeHeight: 300
// 실제 써지는 영역 폭, 보통은 보여지는 영영폭과 같음. 같아야 함.
// 에디터 영역과는 다를 수 있음. 스토리의 경우 실제 써지는 영역이 조금 더 좁다.
,width : 510
,iframePadding : 5
,content:''
,images:[]
,albumImages:[]
//private 용도
,selection : null //ie 버그때문에, iframe에서 click, dblclick이 일어날때마다 선택영역을 이놈에게 설정해 저장해둔다.
, _$editorSec : null //div.editorSec
, _$iFrame : null // self.options._$editorSec.find("iframe")
, _iFrameDoc : null // self.options._$iFrame.contents()[0]
}
});
})(jQuery);