98..Etc/Etc...2008. 9. 17. 17:15

이지 웹에디터

반응형
 

이지 웹에디터(DHTML wysiwyg 웹에디터)

소개

개요

  • 게시판, 사용자 입력폼등에 삽입하여 손쉬운 웹문서편집을 도움
  • 타 위지윅 에디터에 비해 가볍고, 간단함 (easy)

특징

  • 원하는 명령만 손쉽게 삽입 가능
  • 버튼이미지 변경, 변수 컬러값 변경등 으로 손쉬운 스킨 변경
  • 동일한 하나의 문서에 여러개의 웹에디터 삽입 가능
  • 자바스크립트로만 개발되어 가볍고 커스트마이징 용이
  • 사용자추가기능 손쉬운 개발 가능 (플러그인 형태)
  • 테스트 브라우저 : IE6, IE7, FF1.5.X
  • 모든 서버사이드스크립트(PHP,ASP,JSP)에 적용 가능

라이센스 관련

  • 누구나,어디서나 무료로 사용 가능
  • 배포,수정 재배포,판매 가능
  • 단, '물음표아이콘(about.gif)' 기능 수정,삭제 불가능

설치 방법

준비작업

기본 파일설명

  • [img] - 이미지파일 디렉토리
  • ex.html - '이지웹에디터' 삽입방법 테스트 파일 (동작과 상관없음)
  • easyEditor.js - 자바스크립트 모듈 파일 (환경변수 참고)
  • table.html - 테이블삽입 폼 HTML 파일

예제 소스

  • 예제 실행
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <html> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":218144,"name":"webprogrammer","title":"개발자(開發者) a developer","isDormancy":false,"nickName":"1010","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=http://webprogrammer.tistory.com/389","DEFAULT_URL":"https://webprogrammer.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":389,"isAuthor":false,"categoryId":134546,"categoryLabel":"98..Etc/Etc..."}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://webprogrammer.tistory.com", tistoryUrl: "https://webprogrammer.tistory.com", manageUrl: "https://webprogrammer.tistory.com/manage", token: "Q+v8Cs8Ilzp/49fTyPBCVuORBBekMm9e9qaqDgH0S3ObZDsTLRdNXmVyyzIbFN/j" }; var servicePath = ""; var blogURL = "";</script> <script> function chkForm(f) { var content = ed.getHtml(); //대체한 textarea에 작성한HTML값 전달 if(content=="") { alert("내용을 적어주세요!"); ed.focus(); return false; } alert(content); //값확인(디버깅) return true; } </script> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-92a0ff29eba69149e99a17fe09aa8e5b3343ff4e/static/style/revenue.css"/> <link rel="canonical" href="https://webprogrammer.tistory.com/389"/> <!-- BEGIN STRUCTURED_DATA --> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://webprogrammer.tistory.com/389","name":null},"url":"https://webprogrammer.tistory.com/389","headline":"이지 웹에디터","description":"이지 웹에디터(DHTML wysiwyg 웹에디터) 소개 개요 게시판, 사용자 입력폼등에 삽입하여 손쉬운 웹문서편집을 도움 타 위지윅 에디터에 비해 가볍고, 간단함 (easy) 특징 원하는 명령만 손쉽게 삽입 가능 버튼이미지 변경, 변수 컬러값 변경등 으로 손쉬운 스킨 변경 동일한 하나의 문서에 여러개의 웹에디터 삽입 가능 자바스크립트로만 개발되어 가볍고 커스트마이징 용이 사용자추가기능 손쉬운 개발 가능 (플러그인 형태) 테스트 브라우저 : IE6, IE7, FF1.5.X 모든 서버사이드스크립트(PHP,ASP,JSP)에 적용 가능 라이센스 관련 누구나,어디서나 무료로 사용 가능 배포,수정 재배포,판매 가능 단, '물음표아이콘(about.gif)' 기능 수정,삭제 불가능 설치 방법 준비작업 http://ca..","author":{"@type":"Person","name":"1010","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2008-09-17T17:15:27+09:00","dateModified":"2008-09-17T17:15:27+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script> <!-- END STRUCTURED_DATA --> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-92a0ff29eba69149e99a17fe09aa8e5b3343ff4e/static/style/dialog.css"/> <link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-92a0ff29eba69149e99a17fe09aa8e5b3343ff4e/static/style/postBtn.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-92a0ff29eba69149e99a17fe09aa8e5b3343ff4e/static/style/tistory.css"/> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-92a0ff29eba69149e99a17fe09aa8e5b3343ff4e/static/script/common.js"></script> </head> <body> <form onsubmit="return chkForm(this)"> 제목 : <input type="text" name="title"> <br /> 내용 : <input type="submit" value="전송"> <script> var ed = new easyEditor("content"); //초기화 id속성값 ed.init(); //웹에디터 삽입 </script> </form> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-92a0ff29eba69149e99a17fe09aa8e5b3343ff4e/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"218144-389","customProps":{"userId":"0","blogId":"218144","entryId":"389","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"389","entryTitle":"이지 웹에디터","entryType":"POST","categoryName":"98..Etc/Etc...","categoryId":"134546","serviceCategoryName":null,"serviceCategoryId":null,"author":"216141","authorNickname":"1010","blogNmae":"개발자(開發者) a developer","image":"","plink":"/389","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>

소스 설명

  • 3 줄: 삽입할 HTML문서내에 자바스크립트 모듈 호출
  • 21 줄: 대체할 textarea 태그에 id 속성 부여 (값은 유니크해야 함, name속성값과 동일 권장)
  • 23~26 줄: id속성값을 인자로 하여 인스턴스 생성후 '이지웹에디터' 삽입스크립트 호출 ( ed 라는 인스턴스명 유니크 해야함)
  • 7 줄: ed.getHtml() 호출하여 대체한 textarea에 편집한 HTML값 전달

사용 예제

게시판 사용예제

변수 사용예제

  • 예제 실행 <script> var ed = new easyEditor("content"); ed.cfg.width = "300px"; //가로 설정 (디폴트 100%) ed.cfg.height = "300px"; //세로 설정 (디폴트 200px) ed.cfg.border = "4px solid green"; //웹에디터 보더 설정 (css) ed.cfg.Btn = easyConfig.BtnTemplate["simple"]; //명령버튼셋 simple로 설정 (디폴트 all) ed.init(); </script>
  • 예제 실행 <script> var ed = new easyEditor("content"); ed.cfg.width = "500px"; //가로 설정 (디폴트 100%) ed.cfg.height = "400px"; //세로 설정 (디폴트 200px) ed.cfg.border = "1px dashed red"; //웹에디터 보더 설정 (css) ed.cfg.Btn = ["bold","underline","strike"]; //명령버튼셋 세팅 ed.init(); </script>
  • 예제 실행 <script> var ed = new easyEditor("content"); ed.cfg.imgpath = "./img/flat"; ed.cfg.over_bordercolor = "#facf98"; //버튼마우스 오버시 border컬러 ed.cfg.over_bgcolor = "#ffffea"; // 버튼 마우스 오버스 bg컬러 ed.cfg.divbtn_bgcolor = "#e7e7e7"; // 버튼 영역 div bg컬러 ed.init(); </script>

명령버튼 추가하기

특징

  • 원하는 기능의 명령버튼 추가 가능 (사용자 생성함수 호출)
  • 사용 가능예) 이모티콘삽입, 특수문자 삽입, 이미지업로드 첨부 등
  • 추가 개발 배포 예정
  • easyEditor.js 파일 하단에 명령추가행 참고

예제소스

  • easyConfig.BtnList.{명령어} = ["{명령어설명}","{버튼이미지명}", {실행함수선언}];
    easyConfig.BtnList.table = ["테이블 삽입","table.gif", function (self){ window.open(easyConfig.filepath+"/table.html","table","width=400,height=220,status=1"); } ];

이미지 업로드 명령 예제





Posted by 1010

티스토리툴바