Study!

2016년 7월 21일 목요일

Vue.js Python Django conflict

Vue.js 를 Django 에서 사용할때, view template 에서 사용하는 {{}} 패턴과 중복이 되어 문제가 생기게 된다.

해결방법은 아래와 같다.

view template 의 {% verbatim %}{% endverbatim %} 테그로 Vue.js 코드영역을 감싸는 방법.
...
<ul>
{% verbatim %}
<li v-for="article in articles">{{article.message}}</li>
{% endverbatim %}
</ul>
...
Vue.js 의 사용 패턴을 변경한다.

Vue.config.delimiters = ['[[', ']]'];

2016년 2월 14일 일요일

spring Tool Suite STS Javascript Validation 끄기

위 설정을 한다면 Javascript Validation 에러가 나지않는다.

2015년 5월 14일 목요일

CKEDITOR fakeelement 를 이용하여 widget 형식으로 사용하기

CKEDITOR fakeelement 를 이용하여 widget 형식으로 사용하기

ckeditor 를 사용하다가 사용자가 만든 custom element (혹은 custom tag 이하 cutom element) 를 화면에 보여주고 수정하려면 widget 과 fakeelement 를 사용하는 방법이 있습니다. 이중 widget 은 fakeelement 보다 상대적으로 복잡한듯 하고 수정이 쉽지 않아서 fakeelement 를 widget 처럼 사용할 수 있는 플러그인을 만드는 법을 구상하였습니다.

1. CKEDITOR 가 있는 index.html 파일을 생성합니다. jquery 는 style 이나 class, attribute 를 수정하기 편하여 사용하였으나 사용하지 않아도 무관합니다.

index.html

2. \plugins\ 폴더 아래에 fakeWidget 폴더를 생성하고 그 안에 plugin.js 파일을 생성합니다.

3. plugin.js 의 기본 틀을 작성합니다.

plugin.js

4. config.js 파일을 추가합니다. 이 파일은 ckeditor 의 옵션들을 설정해주는 기능을 합니다.
아래 코드에 지금 만드는 fakeWidget plugin 을 ckeditor 에서 사용하게 등록시켜주는 코드를 넣었습니다.

config.js

여기까지가 기본적인 에디터 등록 방법이었습니다. 이제부터 플러그인 개발 시작입니다.

5. 기본적으로 ckeditor 에서는 ckeditor 에서 허용하는 element 외의 element 들은 모두 제거해버리고 children 이 있다면 <p> tag 로 children 을 감싸게 됩니다. 그러므로 custom element 를 지우지 않고 ckeditor 에서 사용하려면 config.extraAllowedContent 를 이용하여 새 규칙을 등록하면 됩니다.

config.js

여기까지 작업한 뒤 아래 사진처럼 코드를 넣어보면, <fakewidget> element 가 지워지지 않는 것을 볼 수 있습니다.

6. 이제 <fakewidget> element 를 getData() 로 editor 의 값을 가져올 때와 다르게 화면상에선 img 나 div 등으로 변환해서 보여주기 위해 editor.dataProcessor.dataFilter 를 사용합니다.
우리는 fakewidget 이라는 element 를 걸러내서 다른 element 로 바꿔야 하기 때문에, fakewidget 이라는 element 를 새 규칙으로 등록합니다.

plugin.js

7. 다음으로 <fakewidget> 를 editor.createFakeParserElement 를 사용하여 원하는 element 로 에디터 화면에 보여지게 합니다. 예제는 div 안에 img 와 div 가 있는 element 들을 만들겠습니다.

plugin.js

CKEDITOR.plugins.add('fakeWidget', {
     init: function (editor) {

}, 
    afterInit: function (editor) {
        var dataProcessor = editor.dataProcessor;
        var dataFilter = dataProcessor && dataProcessor.dataFilter;
        if (dataFilter) {
            dataFilter.addRules({
                elements: {
                    'fakewidget': function (element) {
                         var fakeElementDiv = editor.createFakeParserElement(element, 'fakewidget', null, false);
     fakeElementDiv.name = 'div';

/* 내용을 수정못하게 할 것인지 */
     fakeElementDiv.attributes.contenteditable = 'false';
     fakeElementDiv.attributes.style = 'outline:2px solid #eee;text-align:center;';

/* children 을 넣을 것이라면 false, img element 같이 children 이없는 테그라면 true */
     fakeElementDiv.isEmpty = false;

/* fakeElementDiv 안에 들어갈 img 와 div 테그를 생성 */
     var thumbImg = CKEDITOR.htmlParser.fragment.fromHtml('<img>').children[0];
     thumbImg.attributes.contenteditable = 'false';
     thumbImg.attributes.src = 'testurl';
     thumbImg.attributes.style='width:200px;height:200px; border:1px solid #eee;';

var comment = CKEDITOR.htmlParser.fragment.fromHtml('<div>
').children[0];
     comment.attributes.contenteditable = 'false';
     comment.setHtml('I\'m fakewidget !');

/* fakeElementDiv 에 생성한 children 들을 넣음 */
            fakeElementDiv.children = [thumbImg, comment];
                        return fakeElementDiv;
                    }
                }
           });
        }
    }
})

여기까지 하셨다면 <fakewidget>가 아래 화면처럼 보여 지게 되고, getData() 시, <div> 가 아닌 <fakewidget>abcd</fakewidget> 값을 가져오게 됩니다.

다음 글에선 http://ckeditor.com/demo#widgets 공식사이트의 widget 처럼 동작하는데 필요한 기능들을 따로따로 추가하겠습니다.

1. fakeWidget 에 focus 가 가면 파란색 테두리생성(키보드로 작업중 focus가 갔을 때와 마우스로 클릭했을 때 )

2. fakeWidget 상단에 drag 아이콘추가한뒤 해당 아이콘을 드레그하면 그 위치로 이동

3. <fakewidget>내용</fakewidget> 내용 수정시 화면에 보여지는 fakeelement에 실시간 반영되는 기능.

4. 더블클릭 시 팝업띄우고 해당 fakewidget 내용 수정기능.

참고사이트
http://docs.ckeditor.com/#!/api

http://keditor.com/demo

2014년 10월 28일 화요일

IIS 외부 링크 방지하는 법

IIS 외부 링크 방지하는방법

※IIS 7.0 이상

웹사이트선택후 URL 재작성 선택. URL 재작성이 없다면 "웹 플랫폼관리자" 를 통해

IIS 에 추가설치 합니다.

인바운드 규칙 편집의 패턴에 입력한 정규식으로 URL 을 필터링할 수 있습니다. 예제로 들어있는 내용은 특정 이미지확장자들을 외부에서 바로 들어올 경우를 필터링합니다.

마지막으로 URL 재작성란에 넣는 주소는, 필터링된 주소일 경우 이동시킬 경로를 적어주시면 됩니다.

2014년 10월 6일 월요일

phaser.js 테스트코딩

phaser 튜토리얼을 찾다보니 node.js 를 이용한 소스가있어서 따라해보았습니다.
예제에선 requirejs 의 모듈화기능으로 sprite 들을 다 모듈화해서 코딩하는데, node.js 없이 하려니 새로코딩한게 되버렸네요.
어찌어찌 되긴하는데, 이게 제대로코딩된건지도 모르겠네요^^;;

2014년 8월 31일 일요일

Sublime Text 자동정렬 단축키 설정

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

단축키는 원하는대로 바꾸면 된다 .

2014년 8월 14일 목요일

Set upload file size for PHP on WebMatrix 3

사용자가 설치한 PHP 폴더경로와 webmatrix 에 설치된 PHP 의 경로가 다르다.

webmatrix 의 설치 경로는

C:\Program Files (x86)\PHP\v5.3\php.ini

win7 64bit 기준
C:\Program Files (x86)\IIS Express\PHP\v5.3\php.ini

PHP 버전은 달라질 수 있다.

// 4GB
post_max_size = 4096M
upload_max_filesize = 4096M

이것만으로 안된다면

web.config

<system.webServer>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="4294967295"/>
</requestFiltering>
</security>
</system.webServer>

추가해주면된다.

ps. iis 에 호스팅된 php 사이트를 webmatrix 로 열때도 iis 의 설정과는 별개로 위처럼 설정해 주어야 한다.

2014년 5월 14일 수요일

Error: Request Entity Too Large

connect module 을 사용중이라면 이렇게 간단하게 용량 제한을 설정 가능하다.

2014년 3월 10일 월요일

Sublime Text 2, 3 한글 깨짐 문제

파일의 인코딩을 UTF-8, euc-kr 로 바꿨는데도

한글 입력시 ? 물음표로 나오면서 깨질 경우가 있는데,

폰트를 바꿔주면 된다.

Preferences - Settings-User 에서

"Font_face":"Gulim"

을 추가해주면 되고, 다른 한글 폰트를 선택해줘도 상관없다.

2014년 3월 8일 토요일

node.js fs 에서 한글 경로 등 한글이 안보일 때

파일 인코딩을 UTF-8 로 해주면 된다.

2014년 2월 4일 화요일

node.js mongodb ObjectId 사용법

mongodb-native 모듈을 사용할 때, 아래와 같이 하면 된다.