워드프레스 플러그인으로 개발된 1pixelout의 플래쉬 기반 mp3플레이어를

제로보드 xe용 에디터 컴포넌트로 수정한 버젼입니다. 제작사 홈페이지

기본 플레이어에서는 ID3태그 출력기능이 있으나, 2바이트 문자가 깨져서 나오는 버그가 발견되어

일단 곡 정보 표시부분은 제외하였습니다. 능력자 분이 계시면 액션스크립트를 수정해주셨으면 좋겠군요 ㅎㅎ


mp3파일의 저작권문제에 관해서는 본인은 책임을 지지 않습니다.

가급적 저작권에서 자유로운 음원을 이용하시기 바랍니다.


테스트 브라우저 : IE 6, IE 7, Firefox3 이상없음

                        Safari 3.1.2에서 테스트 완료(Mac OSX Leopard 10.5.4)
                                 Safari는 아직 테스트 전.


<관리자 설정화면 - 기본 색상값 입력 및 자동실행, 반복 설정>

참고 : 기본색상을 입력하지 않은경우, 플레이어의 기본색상을 적용시켜 놓았습니다. 
         따라서 공백으로 두셔도 무방합니다.




<에디터에 나타난 아이콘>

<게시물에 콤포넌트 추가 - 관리자 설정에서 기본색상을 입력하지 않은경우 기본색상이 설정되어 있습니다>



<기본 색상 - 정지>


<기본 색상 - 재생중>




설치경로 : /modules/editor/components/ 에 mp3_1pixelout 폴더가 위치하도록 업로드

네이버 책 검색 입력 컴포넌트 입니다.
네이버 오픈API 키가 필요합니다.
오류는 댓글로 달아주시면 감사하겠습니다.
파일은 둘중 아무거나 익숙하신 걸로 받으시면 됩니다.
soo_naver_bookinfo.zip  soo_naver_bookinfo.tgz
 
다운받아서 압축을 풀면, soo_naver_bookinfo 폴더가 생성될 것입니다. 이 폴더를 zbXE가 설치된 폴더/modules/editor/components 에 넣어주세요.

1. 설정에 따라 이미지의 저작권 표시를 할 수 있습니다. (도움이 되는지는 모르겠지만, 안하는 것보다는 나을듯 하여. This image : Copyright ⓒ NHN Corp.이라고 표시됩니다. - 0.52와 다른 점입니다.)
2. 네이버의 이미지 검색 API 의 결과를 이용합니다. 0.52까지는 에러코드를 보여주지 않았으나, 1.0부터는 에러코드가 나오면, 출력하게 바꾸었습니다.
3. 아이콘 이미지가 변경되었습니다. 기존에 네이버의 날개 달린 모자였으나, 네이버의 마크를 막 사용해도 되는지 걱정 되어서, 바꾸었습니다.
   
4. 아마.. 더 이상의 업데이트는 없습니다.(1.0.이라 한 이유입니다. - 깔끔해보여서...)
5. 다음의 이미지 검색 API도 적용하고 싶었으나, 다음은 원본 이미지 주소가 나오지 않아서 못했습니다. (상반기 중 고친다는 답변인데, 상반기.. 다 지나가고 있습니다.)
   

1. 압축 파일을 다운 받습니다. soo_naver_image.tgz 또는 soo_naver_image.zip 익숙한 형식으로 하세요.
2. 압축을 풀고 생겨난 soo_naver_image폴더를 zbXE가 설치된 폴더/modules/editor/components 에 업로드 합니다.
3. 관리자 페이지 > 에디터 컴포넌트 > 네이버 이미지 입력 컴포넌트의 설정을 합니다. (API키 입력 필수)
4. 잘 작동하는지 확인합니다.

판도라 TV 동영상 업로드 컴포넌트를 최신 API로 업데이트 하였습니다.

삽입된 게시물 미리보기 & 동영상 업로드 해보기

1. 설치

첨부된 압축 파일을 내려 받습니다.

폴더째 압축되어 있으므로 아래 위치에 압축을 풀면 됩니다.
\modules\editor\components

압축 푼 후...
\modules\editor\components\pandora_tv


XE 관리 페이지 - 기능성 모듈의 위지윅 에디터 - 판도라 동영상 삽입 컴포넌트를 활성화 합니다.


2. 가입
판도라 사이트에서 OpenAPI 키를 얻기 위해 가입을 합니다.
http://interface.pandora.tv/?mode=form


3. 설정
첨부된 파일 중 popup.js 파일을 열고 OpenAPI key, 판도라 userid 값을 입력합니다.
또, returnPath 값의 pandora_result_utf.php 파일의 URL 절대 경로를 사용자 사이트의 주소로 변경합니다.

※ 가입, 설정이 귀찮거나 판도라 채널을 관리하지 않으실 경우
 returnPath 경로만 변경하셔도 됩니다.
(※ pandora_result_utf.php 파일을 XE 컴포넌트 폴더가 아닌 다른 곳에 복사하여 경로를 짧게 하셔도 됩니다)

예제



4. 사용

글 작성 - 에디터에서  판도라 아이콘을 누르면 컴포넌트 창과 동영상 업로드 창이 열립니다.

내용을 작성하고 동영상을 올리면 썸네일이 만들어지며 자동으로 XE 에디터에 동영상이 삽입 됩니다.

열렸던 컴포넌트 창은 자동으로 닫히게 되며, 동영상이 삽입 되었는데도 창이 그대로 남아있으면 닫아주세요.


작성 된 글을 확인하면 처음에는 안나올 수 있으나 새로고침을 하면 정상적으로 재생 됩니다.

이미지에디터(ImageEditor) v0.6

컴포넌트 소개

이미지에디터는 그림을 새로 그리거나 그림을 불러와 편집할 수 있는 이미지 편집용 에디터 컴포넌트입니다.
연필, 브러시, 픽셀편집, 지우개, 선, 직사각형, 원, 타원, 채우기, 텍스트 넣기 등의 툴들을 제공하며, 사각영역선택/편집, 레이어기능과 약간의 필터/효과기능도 제공됩니다.
한글뿐만 아니라 영어, 중국어, 일본어도 지원됩니다.

이미지에디터 체험게시판

v0.6 변경사항

업데이트

1. 이미지에디터 텍스트큐브용 개발
2. 확대/축소 배율을 직접 입력할 수 있음 (0.1배~8배 가능)
3. 브러쉬 품질 개선
4. 사각선택영역 안의 화면이 선명해짐
5. 텍스트툴 창에서 자동 줄바꿈 기능 추가

버그해결

1. 파일명이 한글인 파일 불러오기 문제
2. 텍스트툴 버그 해결
   
3. 그림 너비 또는 높이가 100이하일때 스크롤바가 생기던 문제
4. 지우개 크기 버그
5. 이미지 로드시 선택툴로 바뀌지 않던 문제
6. "찾아보기" 버튼 한글로만 나오던 문제
7. 불러오기창 확인버튼 위치수정

다운로드

swf파일 외에도 html파일, php파일의 수정이 있었기때문에 swf파일만 바꾸시면 안됩니다.

• ImageEditor_0.6_xe.zip

• ImageEditor_0.6_xe.tgz

기능 소개

파일 도구 (Files)

• 새로운 그림

  
  
  그림의 폭, 높이와 초기 배경색을 지정할 수 있습니다.
  

• 불러오기

  
  
  내 컴퓨터의 파일을 업로드하거나 웹상의 파일을 불러올 수 있습니다.
  
  

그리기 도구 (Tools)

•  사각선택영역

  사각형의 영역을 선택하여 이동, 크기조절, 복사할 수 있으며 자취를 남길 수 있습니다.
  
  ctrl + 이동/크기조절 - 복사
  shift + 이동/크기조절 - 자취 남기기
  delete - 삭제
  

•  연필
  

  연필 툴로는 자유로운 드로잉이 가능합니다.

• 브러시
  

  브러시 툴로 유연한 드로잉을 할 수 있습니다.
  픽셀보정기능 유무설정이 적용되지 않습니다.

• 픽셀툴
  

  한 픽셀(pixel)씩 편집이 가능합니다.
  확대후 도트작업시 유용합니다.

• 지우개
  

  사각형 형태로 지울 수 있습니다.

• 선
  

  선 툴을 이용해 선을 그릴 수 있습니다.

•  사각형
  

  사각형을 그릴 수 있습니다.
  

• 원
  

  원을 그릴 수 있습니다.
  마우스 클릭지점이 원의 중심이 됩니다.

• 타원
  

  타원을 그릴 수 있습니다.

• 글
  

  
  
  이와 같이 글을 넣을 수 있습니다.
  

• 채우기
  

  윈도우 그림판의 페인트통 기능처럼 플러드필을 할 수 있습니다.
  
  

레이어 (Layer)

기초적인 레이어기능 이용이 가능합니다.

필터 (Filter)

여러 필터들을 적용할 수 있습니다.

되돌리기/다시하기 (Undo/Redo)

되돌리기/다시하기 기능을 지원합니다.

단축키는 각각 crtl+z, ctrl+y입니다.

속성 설정

확대/축소기능과 굵기, 색, 불투명도, 픽셀보정(안티얼라이싱), 모서리 형태 설정을 할 수 있습니다.

설치 방법

1. 다운로드
   

   • ImageEditor_0.6_xe.zip

   • ImageEditor_0.6_xe.tgz

2. 업로드

   제로보드가 설치된 웹 계정에 올립니다.
   
   
   웹 계정서버의 (zbxe경로)/modules/editor/components/ 폴더 내에 위와 같이 업로드합니다.
   

3. 활성화와 권한설정

   제로보드XE 관리자 페이지 - 기능성 모듈 - 위지윅 에디터에서 비활성 버튼을 클릭하여 활성화 합니다.
   바로 왼쪽의 설정 버튼을 클릭하면 사용할 수 있는 회원그룹을 지정할 수 있습니다.
   

4. 그외

   • 컴포넌트 버튼이미지 고르기

        
     (좌측부터 각각 icon1.gif, icon2.gif, icon3.gif)
     

     기본3개와 각각의 psd파일이 준비되어 있습니다.
     이중 마음에 드는 이미지파일을 icon.gif로 이름변경 하신 후 올리시거나
     직접 psd파일을 수정하여 만들어 쓰실 수 있습니다.
     

     기본으로 icon1.gif 가 icon.gif 로 되어있습니다.
     
      (icon_bg.gif)
      버튼 배경도 준비해놓았습니다.
     

   • 버튼위치이동

     
     
     제로보드XE 관리자 페이지 - 기능성 모듈 - 위지윅 에디터에서 위/아래 화살표를 이용해 위치를 옮기실 수 있습니다.

기타

이미지에디터 개발노트
이미지에디터 다국어 번역페이지

이번 버젼부터 이미지에디터가 텍스트큐브를 지원합니다.
모든 기능이 제로보드XE와 똑같이 동작하니 관심있는 분들은 살펴봐주시면 감사하겠습니다.
살펴보기

이미지에디터 v0.5 글을 실수로 삭제해버렸습니다;;
글 저장함에 있는 글을 삭제했는데 본글도 날라가버리네요. 이 글 작성시간도 임시 저장시간이 그대로(19일 새벽2시) 옮겨졌는데 이것도 버그인것같네요.

• 설치 위치 : zbxe/modules/editor/components/ 하위 디렉토리
• 기본값 설정 및 활성 : 관리자 화면 - 기능성 모듈 - 위지윅 에디터 - 글 상자

ver 0.52 : 0.5에서 입력한 이미지들, 수정 없이 뜨도록 수정.

ver 0.51 : 이미지 입력 js 약간 수정

Ver 0.5 : 썸네일 생성되게 수정.

Ver 0.4 : 페이지 기능 추가. 한 페이지당 보여줄 개수 설정 가능하게 수정(기본값 20) (단, 1000개를 넘어가는 검색 결과의 경우 네이버OpenAPI 상에서 더 이상 자료를 받아올 수 없어, 1000번 이상의 검색결과는 표시 못 함(그래서 그때는 다음페이지 버튼이 사라짐))
키보드만으로도 이미지 선택 가능하게 수정.

네이버 이미지를 본문에 입력 할 수 있습니다.
네이버 이미지를 서버로 불러와서 다시 출력하는 방식으로 이미지를 출력합니다.
(단점 : 이미지 로딩이 좀 느리다.)
불러오는 소스는, 구글에서.. 찾은 것입니다;; ( http://crizin.net/201 )

네이버 오픈API를 이용하였습니다.
관리자 페이지에서 네이버 API KEY를 입력해야 합니다.

soo_naver_image.tgz

soo_naver_image.zip

• 이전 버전(0.1)을 사용하시던분은 그대로 덮어쓰기 하시면 됩니다.
• 이전 버전에서 입력한 것에도 적용됩니다.
  • 단, 라운드 크기가 5px로 변경되어 출력됩니다.

• 자바스크립트 라이브러리 교체 : NiftyCube -> jquery-roundcorners-canvas
• 보더(테두리) 설정 추가

야후 거기 지도 Open Api를 이용하는.. 컴포넌트 입니다. 야후 지도는 외국 지명 검색이 가능하다고 합니다.... 외국 지명을 많이 모르기 때문에.. london검색해보니.. 됩니다...

여튼.. 제가 php나 javascript를 잘 못 다루기 때문에... 야후에 있는 샘플 코드를 이용했고, 기본 골격은 zero님의 네이버맵 연동 컴포넌트를 이용하였습니다. 순전히... "외국지명"을 입력할 수 있기에 만들었고, 지명 검색 결과가 나오는 곳에 한해서만 입력할 수 있습니다.(제가.. 마우스 드래그 이벤트 제어를 못하겠습니다... 할 수 있는 분.. 해주시면 감사하겠습니다.)

사용법

LaTeXRender

Expression	Image
\displaystyle\int_{0}^{1}\frac{x^{4}\left(1-x\right)^{4}}{1+x^{2}}dx= \frac{22}{7}-\pi
\begin{displaymath} y = \left\{ \begin{array}{ll} a & \textrm{if $d>c$}\\ b+x & \textrm{in the morning}\\ l & \textrm{all day long} \end{array} \right. \end{displaymath}

본문

수식 입력기능 쓰레드를 보고 만들어야겠다는 생각이 들어 latexrender 클래스에서 필요한 부분만 추출해 에디터 컴포넌트 형태로 만들었습니다.

가장 기본적인 변환인 latex + dvips + convert를 이용하였으므로 해당 프로그램의 설치가 선행되어야 합니다. 자세한 사항은 압축 파일에 첨부되어 있는 README 파일을 읽어주세요.

P.S. README와 언어 파일을 번역해주실 분을 찾고 있습니다. 혹시라도 의향이 있으시다면 쪽지로 보내주시면 감사하겠습니다.

업데이트 내역

0.0.1r1

• php4 환경에서도 잘 동작하도록 html_entity_decode를 제거하였습니다.
• zero 님의 피드백에 따라 mbstring 관련 함수를 제거하였으며, chdir 전에 tmp 폴더가 존재하지 않아 에러를 일으키지 않도록 makeDir을 선두에 삽입하였습니다.

아이프레임 추가(Iframe_maker) v0.1

컴포넌트 소개

아이프레임 태그를 넣고싶을때 간단하게 사용할 수 있습니다.
프레임창 크기, 테두리 모양, 굵기, 색깔, 그리고 스크롤바 사용 설정 등을 할 수 있습니다.

주의사항

이 컴포넌트는 악용의 소지가 있습니다.(광고글 등)
따라서 컴포넌트 사용권한은 회원 이상으로 설정해주는게 좋을것입니다..