웹 개발 공부 (Smart Editor, Ondblclick, jquery prev/next, Sticky)

오늘은 최근 웹 개발을 진행하면서 새롭게 알게된 것들에 대해서 정리해보려고 한다. 

 

1.

첫 번째로 Naver 스마트에디터를 사용해보았다. 게시판 기능을 포함한 웹사이트 제작을 할 때 유용하게 사용할 수 있는 오픈소스 에디터이다. 지금까지 많은 버전이 나왔는데 2.9 버전부터는 사진 업로드 기능이 제공되지 않는다고 한다. 2.8 Version을 아래 링크에서 zip 파일로 우선 다운받아주었다. 

 

링크:  https://github.com/naver/smarteditor2/releases/tag/v2.8.2.3

 

 

압축을 풀어준 후, 원하는 경로에 파일들을 전부 복사/붙여넣기 해준다. 그 후, 필요한 js 파일을 html 파일에서 가져와야한다. (참고로 Spring Boot에서는 HTML에서 불러올 때 기본적으로 /static 폴더를 경로로 잡는다.)

 

 

 

<script type="text/javascript" src="/smarteditor/js/HuskyEZCreator.js" charset="utf-8"></script>

 

 

 

이렇게 가져와준 이후에 textarea 태그에 임의의 id를 지정해준다. 나는 아래와 같이 작성해주었다.

 

 

 

<form:textarea path="contCt" id="smartEdit" placeholder=""></form:textarea>

 

 

 

이제 Script 태그 내에서 에디터 설정만 해주면 된다고 한다. ePlaceHolder에는 textarea 태그의 id, sSkinURI에는 static 폴더 안의 SmartEditor2Skin.html을 넣어준다. 아래와 같이 작성하였다.

 

 

 

let oEditors = []

smartEditor = function() {
  nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors,
    elPlaceHolder: "smartEdit",
    sSkinURI: "/smarteditor/SmartEditor2Skin.html",
    fCreator: "createSEditor2"
  })
}
$(document).ready(function() {
  smartEditor()
})

 

 

 

 

 

 

이렇게만 해주면 화면에는 에디터가 잘 나타날 것이다. 여기서 몇가지 부분을 설정해주고 싶다면 SmartEditor2Skin.html 파일에 직접 들어가서 수정을 해줄 수도 있고, SE2BasicCreator.js 에서 nMinHeight, nMinWidth 값을 조정하여 너비 높이를 설정해줄 수 있다.

 

 

 

이후 에디터를 사용하여 작성한 글을 submit 할 때, 수정사항들을 반영하기 위해서 아래와 같은 코드를 작성해주면 된다.

 

 

 

function submit(){
    oEditors.getById["smartEdit"].exec("UPDATE_CONTENTS_FIELD", [])
    var varForm = $("#formId");
    varForm.submit();
}

 

 

 

이 외에도 이미지 삽입 등을 위해 설정해주어야 하는 것이 더 있는 것 같은데... 이에 대해서는 추후에 더 알아볼 예정이다.

 

 

2.

이 외에도 처음 사용해본 것이 ondblclick이다. 지금까지 onclick으로 많은 것들을 처리했는데, 더블 클릭을 처리할 때는 단순하게 onclick 대신에 ondblclick을 태그 내에 넣어주면 된다!

 

 

3.

또, jquery에서 $("#~~~") 와 같이 태그를 선택했을 때, 해당 태그를 기준으로 바로 앞, 뒤에 있는 태그를 선택하는 법을 알아보았다. 단순하게 prev(), next() 함수로 선택할 수 있다!

 

 

$("#formId").next().append("~~~") 혹은 $("#formId").prev().hide(); 이런 식으로 사용할 수 있는 것이다.

 

 

4.

마지막으로 table 태그 내에서 게시판 리스트 등을 보여줄 때 테이블의 헤더를 고정하고 스크롤을 내릴 수 있는 방법에 대해 알아보았다. 이는 CSS로 간단하게 구현이 가능하다. 다음과 같이 작성해주었다.

 

 

 

<style>
th {
	position : sticky;
	top: 0;
}
</style>

 

 

 

table header 부분의 position을 sticky로 설정해주고 top : 0으로 설정해주기만 하면 스크롤을 내려도 헤더는 계속 화면에 보이게 될 것이다. Position Fixed 는 뷰포트에 고정하지만 sticky는 Scroll 박스에 고정한다. Sticky는 부모 태그의 크기를 기준으로 절대 위치를 지정하게 되는 것이다. 이 때, top 속성을 넣지 않으면 작동하지 않는 것도 확인하였다.