More
javascript
ckeditor 문자 입력 개수 편집기 화면에 출력

ckeditor 문자 입력 개수 편집기 화면에 출력

ckeditor4 버전에서 입력한 글자 개수 또는 html 입력 개수를 화면에 표시 하는 기능이 있습니다. "Word Count & Char Count Plugin" 이라고 불리는 플러그인인데  ckeditor 외부 플러그인으로 설치하면 사용할 수 있습니다. 1. Word Count 플러그인 설치 이름은 Word Count 플러그인 이지만 설치할 때 notification 플러그인도 같이 설치해줘야 합니다. Word Count 플러그인 Notification 플로그인 각각의 플러그인을 다운로드 받았으면 ckeditor 폴더 하위에 있는 plugins 폴더에 wordcount, notification 을 만들고 다운로드 받은 폴더에 있는 plugin.js 파일을 옮겨 줍니다. 이때 다운로드 받은 파일 안의 lang 폴더에 보면 ko.js 라는 파일이 있는데 한글 버전으로 사용한다면 같이 설치 되어야 합니다. 아래와 같이 소스 코드에 파일이 들어가 있어야…
jquery ajax 배열 data를 java에서 받으면 null 이 나올 때

jquery ajax 배열 data를 java에서 받으면 null 이 나올 때

jquery로 testArray 라는 배열을 만들고 ajax 배열 데이터를 넘기면 당연히 배열 데이터이기 때문에 java에서 받을 때 request.getParameterValues("testArray") 로 받는 게 일반적일 것 같지만 넘어오기 전 세팅에 따라 null 값이 나오는 경우가 있습니다.
jquery ui autocomplete를 이용하여 ajax 자동완성 구현

jquery ui autocomplete를 이용하여 ajax 자동완성 구현

jquery ui의 autocomplete 기능을 이용해 검색어를 입력하면 ajax로 입력한 검색어를 전송 후 검색이 완료된 검색어와 값을 input 박스에 보여주고 선택한 값을 화면에 뿌려주는 기능입니다.  jquery 자바스크립트 파일 외에  jquery-ui js파일과 jquery-ui 테마 css 파일이 필요합니다.
ckeditor에 입력한 텍스트를 자바스크립트로 제대로 가져올 수 없을때 해결방법

ckeditor에 입력한 텍스트를 자바스크립트로 제대로 가져올 수 없을때 해결방법

ckeditor에 입력한 텍스트를 form태그에  담아서 넘길땐 괜찮았는데 ajax를 사용하기 위해 ckeditor에 입력한 텍스트를 자바스크립트나 jquery로 <textarea> 태그에 있는 아이디를 선택해보니 입력값을 가져올 수가 없었습니다. 이 문제 때문에 ajax로 전환하려다 한참 시간 낭비 했네요.
ckeditor 플러그인 2개 추가하면 하나만 나타나는 현상 해결방법

ckeditor 플러그인 2개 추가하면 하나만 나타나는 현상 해결방법

ckeditor에 가운데 정렬이 필요해서 justify 플러그인을 설치해 사용하다가 텍스트에 컬러를 입히는 기능도 빠져있길래 colorbutton 플로그인을 설치해 사용하려고 했습니다. 그런데 2개의 플러그인을 선언 해도 둘중 하나만 나타나는 현상이 있어 해결법을 찾아봤습니다.
ckeditor justify 플러그인 추가하여 글씨 정렬기능 버튼 추가하기

ckeditor justify 플러그인 추가하여 글씨 정렬기능 버튼 추가하기

ckeditor를 처음 사용해보는데 기능이 구현하려는 요구사항과 부합해 설치해서 간단한 공지사항 입력 기능을 만들어 보려고 했는데 황당하게 글씨를 좌,우,가운데 정렬 기능 버튼이 안보였습니다. 여기저기 찾아보니 Justify 플러그인을 추가해서 정렬 버튼을 추가해줘야 하네요. ckeditor 실행모습. 글씨 정렬 기능 버튼이 없습니다 Justify 플러그인 추가 먼저 Justify 플러그인을 다운로드 받습니다. 아래 링크 페이지로 이동해 다운로드를 누르면 받을 수 있습니다. 받고 나면 압축되어 있는데 압축을 풀고 안에 있는 justify 폴더를 ckeditor 플러그인 폴더에 넣어주면 됩니다. Justify 플러그인 다운로드 페이지 압축 파일을 풀면 보이는 justify 폴더 justify 폴더를 ckeditor - plugins 폴더에 넣어줍니다 ckeditor Justify 플러그인 불러오기 ckeditor 폴더에 보면 config.js 파일이 있습니다. 이 파일을 열고 &qu…
chosen 라이브러리를 이용해 셀렉트박스에 검색기능 집어넣기

chosen 라이브러리를 이용해 셀렉트박스에 검색기능 집어넣기

셀렉트박스에 나오는 데이터를 간단하게 검색할 수 있는 기능을 찾다가 발견한 jquery 라이브러리 chosen입니다. 셀렉트박스 데이터 검색 및 원하는 value 값을 선택 할 수 있는 기능 등 제가 원하는 기능을 다 가지고 있어서 마음에 드네요.
블로그스팟에 소스코드 보기 좋게 삽입하는 방법

블로그스팟에 소스코드 보기 좋게 삽입하는 방법

지금 쓰고 있는 구글 블로그스팟 테마 디자인에서 <pre><code> 태그를 이용한 소스코드 삽입 디자인 기능을 지원하지만 소스코드라는 것만 표시될 정도의 미약한 기능이기에 이 기능 대신 좀 더 보기 좋게 삽입하는 게 필요했습니다. highlight.js 같은 별도의 자바스크립트 라이브러리를 이용할 수도 있지만  많이 쓰지 않는데  js파일을 하나 선언해야 한다는 점이 별로 마음에 들지 않아서 선언 없이 코드만 삽입할 수 있는 기능을 찾아봤습니다. <code>를 삽입하면 나오는 모습. 컬러가 없습니다. colorscripter.com https://colorscripter.com 처음은 colorscripter 사이트를 이용 해 삽입용 소스코드를 만들어 봤습니다. 만드는 건 간단하고 어렵지 않은데 단점이 블로그 삽입용 소스코드 길이가 너무 길어지고 <code> 태그를 사용하는 방식이 아닌 <div> 태그를 사용해 만들기 때문에 …
자바스크립트 확인 취소 알림창 띄우기

자바스크립트 확인 취소 알림창 띄우기

자바스크립트로 등록이나 삭제 버튼 클릭 시 확인 또는 취소를 선택하는 confirm 함수를 이용하여 알림창을 띄우는 방법입니다.
자바스크립트나 jQuery를 이용하여 새 창에서 부모창 데이터 변경

자바스크립트나 jQuery를 이용하여 새 창에서 부모창 데이터 변경

HTML 페이지에서 새창을 열고 새창에서 부모창의 DOM이나 데이터를 자바스크립트나 jquery로 변경하거나 가져오는 방법입니다.
자바스크립트 키입력 event keycode표와 사용법

자바스크립트 키입력 event keycode표와 사용법

자바스크립트를 이용해 키입력을 받아 처리해야 할 때 사용하는 키코드 목록입니다. 주로 keydown을 사용 할 때 나오는 이벤트를 처리할 때 사용합니다.  toptal.com 페이지에서 하나씩 눌러가며 확인해도 되지만 한번에 쉽게 확인하기 위해 테이블로 만들어 봤습니다.