무료 에디터 중에서도 가장 강력한 기능을 많이 가지고 있는 툴이 바로 notepad++이다. notepad++ 기능에 대하여는 이전에도 다룬 적이 있는데 이번에는 파일 비교 방법에 대하여 알아보려한다.! 파일 비교하여 차이점 찾기 가능예전에는 파일을 비교하는 compare 기능이 유료 에디터에만 존재했는데 지금은 notepad++를 통해 무료로도 사용이 가능하다. 이 기능에 대하여 잠시 소개하자면...두 개의 파일이 서로 다른 점이 있는지 비교하여 찾는 기능이 바로 이 기능이다. compare 할 경우 서로 다른 부분을 구분하여 보여주기 때문에 쉽게 찾을 수 있고 수정할 수 있어 매우매우 필수적인 기능이라 하겠다...! 파일 비교하는 방법두 개의 서로 다른 내용을 찾기 위해서는 아래와 같이 수행해야한다.i.
Last Modified : 2017-11-08 02:13:01CKEditor를 설정하는 방법과 제거하는 ~ 삭제하는 방법은 어떻게 될까요???! CKEditor 사용방법CKEditor는 정말 편리하고 좋은 에디터툴입니다! 개인적으로 아주 잘 사용하고 있습니다. 아래에는 아주 간단한 명령어를 알아보려고 합니다.# CKEditor 사용하기만약 textarea 태그가 있고 name 속성이 editor라면 아래와 같이 CKEditor로 사용 설정이 가능합니다.<textarea name="editor"></textarea><script> CKEDITOR.replace('editor'); // 기본옵션으로 사용하는 경우</script># 에디터 내용 가져오기위와 같이 에디터를 실행할 경우 CKEDITOR에 인스턴스가 생성됩니다. 이 인스턴스를 컨트롤하여 내용을 가져올 수
Last Modified : 2017-09-21 00:21:44CKEditor를 사용하여 에디터를 활성화한 이름이 만약 myEditor라면 다음과 같이 리사이즈 또는 사이즈 등의 옵션을 설정할 수 있습니다.# CKEditor를 사용한 사이즈 조절 및 최대최소 설정하기- 사이즈 조절myEditor.resize(width, height);- 에디터 영역을 포함할 것인지를 결정( true / false )myEditor.resize(width, height, true);# CKEDITOR config 사용의 설정config 설정은 아래와 같이 사용합니다.CKEDITOR.editorConfig = function(config) { // 설정 내용 여기에};- 최소 및 최대 크기의 설정config.resize_minWidth = 200;config.resize_maxWidth
Last Modified : 2017-05-31 10:12:45CKEDITOR를 사용하여 AJAX로 불러온 데이터를 추가하는 방법입니다. 아래 방법이 유용한 이유는 CKEDITOR를 사용하여 다른 방법으로 텍스트를 추가할 경우 함께 추가된 img 및 태그 요소가 적용되지 않을 수 있습니다. 이 경우 아래 방법을 사용하면 모두 정상적으로 코드가 추가되게 됩니다. 그럼 아래 코드를 봐주세요.# CKEDITOR 에디터 html 코드 적용하는 예제소스// Insert Text into CKEDITORCKEDITOR.instances.blogEditor.setData(); // 에디터에 내용 초기화(비우기) setTimeout(function() { CKEDITOR.instances.blogEditor.document.getBody().setHtml(response.
Last Modified : 2017-08-11 01:42:44CKEDITOR를 로딩한 후 바로 포커스가 이동하기 위한 방법은 무엇일까요?# 에디터 로딩 후 포커스하는 방법CKEDITOR.instances.editor.on('instanceReady', function(event) { CKEDITOR.instances.editor.focus();});위 코드를 실행할 경우 에디터가 활성화... 준비된 경우 포커스가 이동하게 됩니다.
Last Modified : 2017-04-18 08:45:26CKEDITOR에서 초기 높이 설정하는 방법 무엇일까요?# CKEDITOR 에디터 높이 설정하기만약 name이 testEditor라면 다음과 같이 높이를 설정합니다.CKEDITOR.replace('testEditor', { height: 100});위 코드는 높이값이 100px로 설정됩니다.
Last Modified : 2017-05-23 10:41:09무료 에디터툴로 넓리 알려진 Notepad++ !!다른 툴에서 사용하던 FTP 기능이 매우 편리했는데 Notepad++는 FTP 기능 역시 지원합니다~ 무료툴임에도 불구하고 안되는게 없을 정도로 참 많은 기능을 지원하는군요!FTP 기능을 사용하면 서버에 바로 업로드와 다운로드가 가능하기 때문에 빈번하게 수정할때마다 ftp를 접속해서 올리고 다운받는 반복적인 작업들이 확~~ 줄어들게 됩니다. 매우 편리한 기능이죠. 그럼 이 FTP 기능을 Notepad++에서 어떻게 사용하는지 알아보도록 하겠습니다 :)# Notepad++에서 FTP 설정하는 방법1. ShowNppFTPWindow 아이콘을 클릭한다. (아래 이미지처럼 아이콘을 클릭하거나 플러그인에 기본으로 설치된 NppFTP를 클릭하시면 됩니다.2. 좌측, 상
Last Modified : 2016-01-08 00:00:36무료 편집툴에서 가장 많이 사용되는 윈도우즈 프로그램이 있다면? 그건 바로 Notepad++ 일 것이다. Notepad++를 사용해본 적 없다면 반드시 사용해봐야 할 필요가 있다. 왜냐하면 무료이면서 너무나 많은 기능들을 가지고 있기 때문이다. 가장 대표적인 기능이라면 아래와 같다.1. 대부분의 프로그램 언어를 인지하여 자동 스타일 부여2. 파일 비교 가능3. FTP 역시 가능4. 다양한 플러그인 방식의 내부 프로그램 설치 가능5. 에디터 중에서 매우 가벼운 편임6. 안정적이며 지속적인 업데이트이 부분들 중 일부는 과거 유료 버전에서만 볼 수 있었던 기능들도 다수 있다. 게다가 4번에 언급된 플러그인을 설치하게 되면 굉장히 유용한 것들이 많으므로 무료 에디터를 찾는다면 이 만한 것은 찾기 어렵다 ~ 그럼 다
Last Modified : 2017-04-30 12:25:13클라우드 에디터(Cloud Editor) 중에서 많이 사용되는 Codeanywhere!! 신규앱이 나왔군요~이전 버전의 앱은 자체 서비스 가입에 대한 로그인만 가능했었죠. 이번에 업데이트를 통해서 소셜 로그인이 안되던 불편을 제거했습니다. 이제는 웹과 똑같이 소셜로그인이 가능합니다.개인적으로 가장 좋아하는 클라우드 에디터가 바로 Codeanywhere입니다!! 그 이유는 몇 가지 있는데요 ~ 일단 매우 직관적이고 편리한 인터페이스도 좋습니다. 그리고 서버의 재시작 속도 및 유지시간도 좋은 편입니다. 물론 무료사용을 기준으로 말씀드립니다. 그리고 이처럼 앱에서도 편하게 사용할 수 있다는 점? 아무래도 급하게 처리해야할 부분이 있다면 핸드폰으로 간단한 부분을 추가 ~ 수정할 수 있어 매우 편리하죠!편리한 Cod
Last Modified : 2017-08-17 23:42:35리눅스, 유닉스 환경에서 자주 사용되는 에디터 vi 또는 vim에 대하여 알아봅니다. 먼저 vi, vim은 파일을 수정하는 에디터 기능을 제공합니다. vi와 vim의 차이점은 vi의 경우 초창기 개발 어플리케이션이고 vim은 vi improved로 개선된 기능을 제공합니다.! vi 그리고 vim의 차이점간단한 차이점 몇 가지를 알아보면...- 더 많은 언어에 대하여 하이라이트, 강조 기능- 네트워크를 사용한 에디팅 가능- 화면 분할이 가능- 압축파일에서도 파일 변경이 가능- 파일 비교하기 기능(vimdiff)- 플러그인 지원- vimscript 스크립팅 가능# Shell에서 vm 또는 vim을 사용한 문서 편집먼저 아래 커맨더로 파일을 수정에 접근할 수 있습니다.vm filenamevim filename@
Last Modified : 2018-11-20 08:09:05CKEditor를 사용하여 읽기전용 상태로 변경하는 방법입니다. setReadOnly() 메소드를 사용하여 설정합니다.만약 Auto Grow 플러그인을 사용중인 경우 마우스로 에디터를 클릭해야 크기가 늘어납니다. 처음부터 화면이 resize되길 원할 경우 아래와 같이 config를 설정합니다.config.autoGrow_onStartup = true;만약 Auto Grow 플러그인이 없다면 추가해야합니다.
Last Modified : 2017-05-23 10:41:43CKEDITOR 에디터 replace 한 뒤에 다시 원상태로 초기화하는 방법은 무엇일까요?# destroy() 메소드를 사용하여 초기화 가능예를들어 만약 name이 testEditor인 경우...CKEDITOR.instances.testEditor.destroy();이제 다시 replace()를 사용하는 것도 가능해지게됩니다.
Last Modified : 2017-04-12 17:01:45CKEDITOR에서 keyup 클릭 이벤트는 어떻게 사용하나요?# CKEDITOR에서 Keyup 이벤트 사용하기만약 textarea 태그의 name 속성이 testEditor인 경우 아래와 같이 코드를 작성합니다.CKEDITOR.instances.testEditor.on('keyup', function(e) { alert();})keyup이벤트가 동작하게 됩니다.
Last Modified : 2017-04-13 11:26:44CKEDITOR에서 img 태그나 원하는 태그만 제거 또는 선택할 수 있거나 원하는 태그만 필터링하는 방법이 있을까요?방법을 찾아보니 아래와 같은 방법이 있더군요~CKEDITOR.editorConfig = function(config) { config.allowedContent = 'img';};아래는 선택 가능하지 않도록 태그를 적용하는 방법입니다. disallowedContent를 사용합니다.CKEDITOR.editorConfig = function(config) { config.disallowedContent = 'img';};좀 더 테스트는 해봐야겠습니다.
Last Modified : 2017-05-31 10:14:17CKEDITOR 로딩된 상태를 알아내는 방법을 알아보려 합니다.CKEDITOR는 replace() 메소드를 사용하면 새로운 인스턴스를 생성하게 됩니다. 작성된 콘텐츠를 추가하려는 경우 해당 인스턴스의 상태가 준비가 되었는지 알아야하며 이때 이벤트 'instanceReady'를 통해 준비 이후 추가하는 것이 가능합니다. 아래 예제를 봐주세요.CKEDITOR.on('instanceReady', function() { // 필요한 작업 실행} );아래 방법 역시 동일하나 에디터를 생성하면서 동시에 이벤트를 실행하는 방법입니다.CKEDITOR.replace( 'myEditor', { on: { instanceReady: function() { // 필요한 작업 실행
Last Modified : 2017-09-21 00:24:29리눅스, 유닉스에 설치된 텍스트에디터 vim을 사용하여 파일을 서로 비교하는 방법을 알아봅니다. 어떻게하면 두 개의 파일을 서로 비교할 수 있을까요?# vim 파일 비교하기만약 파일 두 개를 비교하려면? 이때 vim을 사용해서도 파일 비교를 할 수 있습니다. 방법은 아래와 같이 두 가지가 있습니다.1. vimdiff 사용하는 방법vimdiff file1 file22. vim -d 옵션 사용하기vin의 d 옵션을 사용하면 두 개의 파일의 다른 부분을 찾을 수 있습니다.vim -d file1 file2! vim 에디터 정보 더 알아보기만약 vi 또는 vim 에디터에 대하여 자세한 정보나 팁이 궁금하시면 아래 링크에서 확인하실 수 있습니다.vi vim 더보기는 아래 링크를 클릭 >https://webisfree
Last Modified : 2018-07-12 08:46:29Cloud 에디터를 사용해보면 너무나 장점이 많습니다. 가장 큰 장점은 뭐니뭐니해도 언제 어디서든 바로 자신의 개발환경에서 업무, 코딩이 가능하다는 점입니다.이런 장점을 가진 클라우드 에디터 중에서 인기있는 앱인 Codeanywhere의 개발환경을 구축한 경우 코드 테스트를 하기위한 테스트 url 정보를 얻는 방법에 대하여 알아봅니다.# 테스트 url을 확인하기먼저 CodeAnywhere는 Costom URL을 지원합니다. 하지만 이는 자체적으로 제공하는 테스트 url과는 다르며 기본으로 제공되는 환경의 url을 확인하려면 어떻게 할까요? 이 경우 아래의 방법을 따릅니다.사실 저 역시 이걸 찾는라 애먹었는데요... 해당 위치는 바로 저기의 Info를 누를 경우 나오게됩니다.좌측 메뉴의 Connection 바
Last Modified : None만약 Default로 설정된 config.js 파일이 아닌 다른 파일로 변경하여 적용하기 위한 방법을 알아보겠습니다.# 다른 config.js 파일로 CKEDITOR 실행하기먼저 다른 이름의 config파일은 생성하고 원하는 값을 설정합니다. 만약 해당 파일이 아래에 위치한 경우라면CKEDITOR.replace('myEditor',{ customConfig: '/public/scrips/my_config.js'});이제 CKEDITOR가 로딩된 후 읽게 될 config 파일은 해당 파일로 바뀌어 로딩됩니다.# config.js 파일 로딩하지 않는 방법추가적으로 아예 config.js 로딩을 하지 않는 방법도 가능합니다. 아래와 같이 입력하세요.CKEDITOR.replace('myEditor',{ custom
Last Modified : 2017-05-30 13:52:21SPA(Single page application)에서 CKEDITOR를 적용하는 방법은 무엇일까요?싱글페이지 어플리케이션의 경우 비동기 방식으로 DOM이 그려지기 때문에 textarea 태그가 언제 그려질지 확실히 알기가 어려울 수 있습니다. 예를들어 해당하는 textarea 태그가 directive의 내부의 내부...에 사용되는 경우라던가 기타 ajax가 추가로 사용되는 경우 등등 이 경우 어떻게 할까요?문제는 document의 onready state 또는 onload등의 이벤트 등을 사용하여도 확인이 안되는데 있습니다. 이 경우 지연시간을 강제로 발생하는 방법도 존재하지만... 예를들어 setTimeout() 등을 사용하는 방법이죠. 아니면 태그에 isLoaded 등의 변수를 할당하고 이를 $watc
Last Modified : 2017-04-14 11:22:15CKEDITOR에서 생성될 에디터가 노출되지 않고 DOM 엘리먼트를 스크립트에서 생성하여 replace() 적용한 뒤 보여주게 하려는 경우 어떻게할까요? 그 방법은을 알아봅니다. 이해하기 쉽게 말하면 html을 추가한 뒤 로드가 되면 replace('name')을 적용하지만 자바스크립트에서 DOM 엘리먼트 추가하여 적용하는 방법입니다?var editor = document.body.appendChild(document.createElement('textarea'));CKEDITOR.replace(editor);참고로 위와 같은 방법으로 미리 CKEDITOR의 인스턴스는 생성할 수 있으나 이를 다시 옮기려고 할 경우 문제가 발생할 수 있습니다. 여러가지 테스트 해본 결과 CKEDITOR의 인스턴스와 함께 생성
Last Modified : 2017-05-30 10:52:48CKEDITOR 만약 keyup 클릭 이벤트가 동작 안하는 경우 해결법은 무엇일까요?클릭이벤트가 동작 안하는 경우가 발생하여 여러가지 테스트 해보았으나 안된느 경우가 발생하였습니다. 이때 해결방법으로 keyup 대신 change 이벤트로 변경하는 방법이 있습니다. 변경 후 잘 동작하였습니다.CKEDITOR.instances.editor.on('change', function(e) { alert();})어디가 문제인지는 확실치 않으나 플러그인에 문제가 있을 수도 있으므로 확실한 원인 찾기가 어렵더군요.
Last Modified : 2017-04-13 11:29:31웹개발, 퍼블리싱에 사용하는 텍스트 에디터! 선택은? 일반적으로 아래 에디터들이 사용되죠~notepad++editplusultra editsublimewebstormvisual studioBrackets (http://brackets.io/)오픈소스인 텍스트에디터입니다.# cloud editor요즘은 클라우드 형태로 웹개발을 할 수 있습니다. 무료로도 사용가능한 c9도 유명합니다.c9특정 언어 개발에 사용되는 에디터도 있습니다.PyCharm파이썬 개발 에디터입니다.
Last Modified : 2017-05-13 23:57:30CKEDITOR 에디터 이미지 첨부 안되도록 하는 방법을 알아보려고 합니다.만약 에디터의 사용자에게 이미지 첨부가 안되는 제약사항을 주려면 어떻게해야할까요? 먼저 확인해야할 사항이 있습니다.! config 설정에 image 플러그인이 사용가능한지 확인만약 config 파일 내부에 image 플러그인을 사용하도록 설정된 경우 replace()를 사용한 에디터 config 설정이 동작하지 않을 수 있습니다. 이 경우 Custom config 파일을 사용하도록 변경하는 등의 다른 조치가 필요합니다.그 후에 에디터의 config 설정에서 허용가능하지 않도록 입력합니다.# CKEDITOR config 설정하기아래와 같이 config를 설정합니다.CKEDITOR.editorConfig = function(config)
Last Modified : 2017-05-31 10:14:37CKEditor에서 자동으로 height를 조절할 수 있는 방법이 있을까요?스크립트를 사용하여 구현한 예제를 보았으나 모든 브라우저 사용이 가능하면 좋을 것 같습니다.
Last Modified : 2017-09-21 00:21:36
