블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday

'웹에디터'에 해당되는 글 1건

  1. 2009.10.06 [웹 에디터] Xquared 에디터 붙이기!! 7



 웹개발을 하다보면 간혹 에디터를 붙어야 하는 경우가 생긴다. 그럼 개발자는 어떤 에디터를 사용할까 많이들 고민할 것 이다. 나 또한 그랬으니깐

 그래서 내가 예전에 사용해서 봤던 Xquared를 이용해서 웹사이트에 전용시키는 방법을 공유하려한다. 이는 초보개발자들이 웹에디터를 적용할 때 도움이 되는 문서가 되지 않을까 싶다.

 

Xquared자바스크립트로만 작성되어 있어서 별도의 소프트웨어를 설치 필요가 없고, XHTML표준을 따르는 문서를 만들어 주며, 다양한 확장점을 통해 원하는 기능을 쉽게 추가할 수 있도록 구현되어 있다.

 

Xquared 소개에 보면 위와 같이 설명되어 있다. 자세한 소개는 Xquared에서 확인해 보길 바란다.

 

이제 사이트에 어떻게 적용할지 하나하나 확인 해보자!

! 적용하기전에 먼저 에디터를 다운로드 받도록 한다. 다 받았다면 Visual Studio에서 웹프로젝트를 하나 만들도록 한다.

사용자 삽입 이미지

[그림 1]

Xquared_Editor라는 이름의 웹프로젝트를 하나 생성했다. 새로 생성하면 아마도 위 그림과 같은 모습일 것이다. 그렇다면 이제 아까 다운받았던 Xquared 에디터에서 images, javascripts, stylesheets 폴더를 프로젝트에 추가하자!!

사용자 삽입 이미지

[그림 2]

자 그럼 위 그림과 같이 구성이 되었을 것이다. 그럼 이제 에디터 설정을 하면 된다. 그럼 간단하게 Default.aspx파일에 스크립트 설정을 해보자. (물론 테스트 파일을 열어서 확인해도 편할것이다.)

Default.aspx

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <!-- style  -->

    <link rel="stylesheet" type="text/css" href="/stylesheets/xq_ui.css" />

    <!-- script  -->

 

    <script type="text/javascript" src="/javascripts/XQuared.js?load_others=1"></script>

 

    <script type="text/javascript" src="/javascripts/plugin/FileUploadPlugin.js"></script>

   

    <!-- xed 에디터 생성 스크립트 -->

    <script type="text/javascript">        //<![CDATA[

        var xed;

 

        window.onload = function() {

            xed = new xq.Editor("xqEditor");

 

            xed.setEditMode('wysiwyg');

            xed.setWidth("100%");

        };

        //]]>

</script>

 

</head>

<body>

    <form id="form1" runat="server">

    <div style="width:700px;">

        <!-- 내용이 전달될 textarea  -->

        <textarea id="xqEditor" name="xqEditor"></textarea>

    </div>

    </form>

</body>

</html>

 

스크립트 이벤트인 onload 이벤트 Xquared 에디터를 생성하는 것이 보일 것이다. 위와 같이 간단한 코드로 Xquared 에디터를 붙일수 있다. 지금은 테스트로 Default.aspx 페이지에 붙였지만, 실제 개발한때는 UserControl이나, Control로 잘만들어 놓으면 쓰기 편한 것 이다.


사용자 삽입 이미지

[그림 3 실행모습]

그럼 이제 Validation 체크관련 해서 알아보도록 하겠다. 테스트를 위해 버튼을 하나 만들어 보자. 

 

Default.aspx

function Validation() {

            alert(xed.getCurrentContent(true));

        }

<!-- 중복 코드 생략  -->

<input type="button" value="체크" onclick="Validation();" />

위 코드와 같이 간단하게 만들어 봤다. 버튼을 클릭하면 Validation라는 스크립트 함수를 호출하도록하고, Validation함수에서는 getCurrentContent함수를 통해 에디터의 내용을 반환해서 메세지를 뿌려주는 것이다. (getCurrentContent true를 주면 full-validation 수행된다.)


사용자 삽입 이미지

[그림 4]

위 그림은 실행 모습이다. 이를 이용해서 Validation 체크를 하면 될 것이다.

 

자 그럼 이제 이미지 업로드 설정에 대해서 알아 보도록 하자. 지금 툴바에는 이미지 업로드 버튼이 안보일 것이다. 이는 에디터 생성할 때 설정을 해주어야 한다.

 

Default.aspx

window.onload = function() {

            xed = new xq.Editor("xqEditor");

 

            xed.isSingleFileUpload = true;

            xed.addPlugin('FileUpload');

            xed.setFileUploadTarget('/ImageUpload.aspx', null);

            xed.setEditMode('wysiwyg');

            xed.setWidth("100%");

 

위 코드를 보면 isSingleFileUpload, addPlugin, setFileUploadTarget 이 세가지 함수가 추가로 설정되어 있다. isSingleFileUpload는 한 개 파일 업로드를 하겠다고 설정한 것이다. (다중 파일업로드는 Xquared 사이트에서 확인 해보기 바란다. 지금은 SingleFileUpload에 관련해서만 설명하도록 하겠다.) addPlugin() 메소드를 사용해서 플러그인을 xed에 추가한다. setFileUploadTarget()메소드는 파일 업로드할 페이지를 지정한다. 그래서 난 ImageUpload.aspx라는 페이지를 하나 생성해서 추가해 두었다. 그럼 이제 ImageUpload 페이지에 파일 업로드 코드를 작성하도록 하자.

 

먼저 스크립트를 추가 한다.

 

ImageUpload.aspx

<script type="text/javascript">        //<![CDATA[

        window.onload = function() {

 

            if (window.parent.xed) {

                window.parent.xed.fileUploadListener.onSuccess('<%= FileName %>','');

            }

        }

//]]></script>

 

스크립트는 간단하다 부모의 xed객체의 onSuccess메소드를 호출해 주는 것이다. 여기서 파일이름을 같이 전달해준다.

 

ImageUpload.aspx.cs

/// <summary>

        /// 파일 이름을 지정/반환합니다.

/// </summary>

protected string FileName { get; set; }

 

        protected void Page_Load(object sender, EventArgs e)

        {

            Save();

        }

 

        /// <summary>

        /// 파일을 저장합니다.

        /// </summary>

        private void Save()

        {

            // 에디터에서 표시될 이미지 경로

            string _imagehost = string.Format("http://{0}/FileUpload", Request.ServerVariables["HTTP_HOST"]);

            // 이미지 파일 저장 경로

            string UPLOADPATH = Server.MapPath("FileUpload");

 

            // 정상적으로 처리가 되었는지 여부

            bool isSuccess = false;

            // 이미지 지정 경로

            string imgPath = "";

 

            // 업로드 파일이 존재 여부 확인

            if (Request.Files.Count <= 0)

            {

                // Error 출력

                Message(isSuccess, imgPath, "Error");

                return;

            }

 

            // HttpPostedFile 인스턴스 생성

            HttpPostedFile file = Request.Files[0];

            // 파일 이름을 반환합니다. [고유한 파일명 반환]

            FileName = GetName(file.FileName);

 

            // 파일 이름이 null이면 error

            if (string.IsNullOrEmpty(FileName) == true)

            {

                Message(isSuccess, imgPath, "Error");

                return;

            }

 

            // 파일 저장합니다.

            file.SaveAs(Path.Combine(UPLOADPATH, FileName));

            // 정상처리

            isSuccess = true;

            // 에디터에서 보여질 경로 지정.

            imgPath = String.Format("{0}/{1}", _imagehost, FileName);

 

            // 메세지 출력

            Message(isSuccess, imgPath, "");

        }

 

        /// <summary>

        /// 메세지를 반환합니다.

        /// </summary>

        /// <param name="isSuccess"></param>

        /// <param name="fileUrl"></param>

        /// <param name="errorMessage"></param>

        public void Message(bool isSuccess, string fileUrl, string errorMessage)

        {

            string result = string.Format(" success:{0}, file_url:'{1}', message:'{2}' ", isSuccess.ToString().ToLower(), fileUrl, errorMessage);

            this.body1.InnerHtml = "{" + result + "}";

        }

 

        /// <summary>

        /// 파일 이름을 반환합니다.

        /// </summary>

        /// <param name="fileName"></param>

        /// <returns></returns>

        public string GetName(string fileName)

        {

            // 불필요한 파일 이름 삭제

            int lastCount = fileName.LastIndexOf(".");

            string fileType = fileName.Substring(lastCount, (fileName.Length - lastCount)).ToLower();

            string saveFileName = string.Empty;

 

            // 해당 type이 아니면 null 반환

            if (fileType == ".jpg" || fileType == ".gif" || fileType == ".png")

            {

                // 고유할수 있도록 간단하게 DateTime.Now.Ticks 사용함.

                saveFileName = DateTime.Now.Ticks.ToString() + fileType;

            }

 

            return saveFileName;

        }

 

.cs 코드는 따로 설명이 필요 없도록 코드에 주석을 달아 놨다. 이렇게까지 해서 Xquared 에디터 붙이기 성공을 했다. 간단하게 예제를 실행해 보고 파일이 정상적으로 폴더에 들어 갔는지 확인해 보자!!

 

[그림 5 Image 버튼 클릭후 파일 선택 모습]

 

[그림 6 Insert버튼 클릭후 모습]

 

[그림 7 저장파일]

 

정상적으로 잘 작동하는 것 같다~^^

이 프로젝트 소스는 첨부파일로 같이 올려 놓아요!

Posted by happydong
, |