[ExtJS강좌 21] HTML에디터를 이용하여 좀더 화려하게 텍스트를 꾸며보자

자바스크립트이야기/ExtJS

[ExtJS강좌 21] HTML에디터를 이용하여 좀더 화려하게 텍스트를 꾸며보자

개발로짜 2014. 7. 4. 01:22

기존에 단순 textarea로 내용을 작성해서 db에 넣었다면, 이번에는 HTML에디터를 이용하여

텍스트를 꾸며보도록 하자

와우~~~

HTML에디터는 별도의 설명이 필요 없을듯...

그냥 에디터 출력 -> 편집 -> 에디터로 작성한 텍스트 출력 이정도만 다루도록 하겠다.

(사실 사용해본적 없어서 -_-;; 미니프로젝트 할때나 자세히 들여다 봐야 할듯...

우선 설정이 안되있는 분이시라면 다음 페이지를 참고하도록 하자

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

설정이 되었다면 이제 html 에디터를 출력하도록 해보자

폼패널안에 xtype 이 htmleditor을 선언해주고 fbar에 버튼을 하나 만들어준후 버튼 클릭 이벤트시 msg창으로 에디터의 text 값을 출력해보도록 하자

이번부분은 별도로 설명하는 내용이 없어서 소스 + 주석을 참고하도록 하자

Ext.onReady(function(){
//폼패널
 Ext.create('Ext.form.Panel',{
		   //폼패널 타이틀
		   title : '폼패널 - SIMPLE HTML EDITOR',
		   //지정위치
	       renderTo : Ext.getBody(),
	       items : [
				{
					// HTML 에디터 생성
					xtype: 'htmleditor'
				}
			],
			fbar : [ 
			        {
			        	xtype : 'button',
			        	text : '에디터 내용출력',
			        	//버튼 클릭이벤트
			        	handler : function(btn){
			        		//콘솔로 HTML 태그 확인
			        		console.log("HTML EDITOR GET TEXT",btn.up("form").down("htmleditor").getValue());
			        	}
			        }
			 ]
	   });
});

뭐 아무것도 없다.. 에디터도 그냥 default 로 되있어서 레이아웃같은것들이 엉망진창이다.

해당 부분 에디터는 심플 프로젝트 진행하면서 좀더 다듬은 내용으로 진행하도록 하겠음..

실행하여 화면 출력을 하고 버튼으로 데이터를 출력해보자

1. 화면출력