본문 바로가기

JavaScript8

[TinyMCE] Content appearance options 종류 (에디터에 커스텀 스타일 적용하는 방법) https://www.tiny.cloud/docs/configure/content-appearance/ TinyMCE | Content appearance options Configure the appearance of content inside TinyMCe's editable area. www.tiny.cloud 먼저 tinyMCE 공식 문서에서 Content appearance options를 테스트하던 중 body_class와 body_id 옵션이 자꾸 적용되지 않았다. 결론적으로 해결방안은 content_css 옵션으로 외부 css파일을 등록하고 그 css파일에 있는 클래스명이나 아이디값을 body_class나 body_id 옵션의 값으로 넣어주면 된다. TinyMCE 에디터 자체가 textar.. 2020. 5. 29.
[JavaScript] 양력을 음력으로 변환, 음력을 양력으로 변환 양력달력의 경우 Javascript의 Date객체를 사용하면 쉽게 만들 수 있지만 음력달력을 만들려고 보니 생각보다 어려웠다. 먼저 음력이 어떻게 만들어지는지도 몰랐고 음력의 규칙성을 찾을 수 없었다. 구글링하며 소스를 찾다가 좋은 소스를 찾아서 조금 수정하고 주석을 추가로 달아서 적용했다. https://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=69098309&qb=amF2YXNjcmlwdCDslpHroKUg7J2M66Cl&enc=utf8§ion=kin&rank=1&search_sort=0&spq=0 댓글란에 보면 네이버의 달력에서 소스를 추출해 왔다고 한다. 실제로 적용해보면 음력으로 값이 잘 나오게 되고 음력날짜를 넣어 양력값을 얻는 부분도.. 2020. 5. 28.
[TinyMCE] User Interface options 종류 tinymce.init({ selector: 'css선택자', ui options... }); branding: boolean 값 false 시 하단의 'Powered by Tiny'문구를 삭제할 수 있다. premium 유저들에게만 선택적이다. draggable_modal: boolean 값 true 시 생성되는 모달창을 드래그로 움직일 수 있게 된다. elementpath: boolean 값 false 시 하단에 표시되는 요소선택자가 안보이게 된다. font_foramts: 'custom font name=origin font name, sub1, sub2...; other...;' 폰트명을 설정할 수 있다. 하나의 폰트명에 여러개의 폰트를 정할 수 있고 맨앞의 폰트가 없을 시 뒤에 있는게 설정되는 .. 2020. 5. 28.
[TinyMCE] textarea 값 가져오는 방법 TinyMCE 홈페이지를 보면 textarea를 form태그로 감싸 post방식으로 전송하라고 되어있다. 그래서 post방식으로 전송을 해보면 textarea적혀있는 값과 형태에 맞는 태그들이 전부 그대로 전송된다. 그런데 페이지이동없이 처리하는 ajax로 처리하려면 textarea안의 값을 추출해야하는데 javascript의 value로 해보면 textarea의 초기값만 추출되고 수정된 값들은 추출되지 않는다. 에디터를 다음과 같이 수정한 뒤 개발자 도구에서 textarea의 값을 확인해보면 안의 값은 바뀌지 않는걸 확인할 수 있다. TinyMCE는 textarea가 아닌 iframe을 올려 그 안에서 변경되는 값을 적용하기 때문에 textarea의 값은 초기값만 적용된다. 에디터안의 수정된 내용을 가.. 2020. 5. 27.
[Nodejs] ejs로 html태그값 유지하면서 사용하는 방법 TinyMCE라이브러리를 공부하며 post로 서버에 전송해보고 싶은게 있어서 nodejs로 서버를 구현하여 테스트하던중 값은 잘 넘어가지만 ejs로 html태그값을 출력하려고 하면 자꾸 '' 꺽세괄호들이 '<', '&rt;'로 컴파일할 때 자동으로 바뀌는 현상이 나타났다. 어찌하나 계속 구글링 하던중에 스택오버플로에서 답을 찾았다. https://stackoverflow.com/questions/10326950/render-a-variable-as-html-in-ejs Render a variable as HTML in EJS I am using the Forms library for Node.js (Forms), which will render a form for me on the backend as .. 2020. 5. 27.
[TinyMCE] 라이브러리로 textarea 변경하기 TinyMCE 라이브러리는 textarea태그나 div태그의 편집을 도와주는 도구입니다. 라이브러리를 적용하면 기존의 textarea가 다음과 같은 화면으로 출력됩니다. 블로그나 카페에서 많이 사용하던 편집기의 기능들이 대부분 담겨있습니다. 다음은 TinyMCE 공식 홈페이지입니다. TinyMCE의 자세한 설명과 소개글을 확인할 수 있습니다. https://www.tiny.cloud/ The Most Advanced WYSIWYG HTML Editor | TinyMCE Download TinyMCE for free, the most advanced WYSIWYG HTML editor designed to simplify website content creation. www.tiny.cloud 먼저 위의 .. 2020. 5. 27.
[Node js] ${} 표현식 오픈 튜토리얼을 보면서 Nodejs를 차근차근 따라해보고 있는데 jsp에서의 EL 표현식과 비슷한 표현식을 알게 되었습니다. 사용법은 EL과 거의 똑같았지만 리터럴이 홀따옴표(')나 쌍따옴표(")가 아닌 숫자 1옆에 있는 특수문자 (`)를 리터럴로 사용해야 저 표현식이 제대로 인식되었습니다. var template = ''; fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){ console.log(description); if(err) throw err; template = ` ${description} `; response.end(template); }); 그리고 response.end() 함수를 readFile 바깥에다 두었.. 2020. 5. 20.
[JavaScript] yyyyMMdd, yyyy-MM-dd형식으로 오늘날짜 출력하기 먼저 new Date()로 날짜 객체를 생성하면 객체가 만들어진 날짜로 저장이 됩니다. Tue May 19 2020 08:50:54 GMT+0900 (대한민국 표준시) -> 이런식으로 출력이 되는데 여기서 년도, 월, 일수만 뽑아서 함수로 만들겠습니다. 객체의 메소드로 getFullYear(), getMonth(), getDate()를 사용하면 해당 값들을 추출할 수 있는데 getMonth()의 경우 시작 월수가 0~11이기 때문에 +1을 해주어야 합니다. 날짜를 꼭 8자리를 맞춰야할 때 월수나 일수가 1자리일 경우 202051 이런식으로 출력될 수 있습니다. 그렇기 때문에 값 앞쪽에 "0" 문자열 리터럴로 더해준 뒤 문자열을 나누는 메소드인 slice()로 뒤에서부터 2개를 잘라주면 월수와 일수가 2자.. 2020. 5. 19.