HTML 웹 편집기 > 그누보드5 플러그인

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

HTML 웹 편집기 정보

HTML 웹 편집기

첨부파일

html.Zip (57.8K) 23회 다운로드 2024-02-20 09:29:45 포인트 차감1
테스트한 버전5.5.12
호환 가능 버전아마도 전부

본문

 

2024년 02월 11일 18시에 아이프레임으로 불러올 경우의 style 을 조금 변경하여 업뎃합니다.^^

 

----------

 

1. 이건 20년 동안 제가 개인적으로 만들어 써 오던 html, css, 자바스크립트를 웹에서 바로 편집하며 볼 수 있는 일종의 빈약한 코드펜에 해당하는 웹 편집 에디터입니다.

 

----------

 

2. 첨부파일의 압축을 풀고 폴더째 원하는 디렉토리에 업로드합니다.

그누가 깔려 있건 말건 상관이 없습니다.

index.php 의 확장자는 php 지만 php 구문은 하나도 없으며 반응형이라기 보다는 pc, 모바일세로, 모바일가로의 3가지 유형만 배려한 쓰리 포인트형입니다.

편집기의 좌측창에 html, css, 자바스크립트의 코드를 입력하고 결과보기 클릭하면 표현물이 보여집니다.

 

http://wittazzurri.phps.kr/editor/html/

 

----------

 

3. 반응형 확인을 위해 결과창의 크기를 퍼센트별로 버튼을 만들었고 제이쿼리를 사용할 경우 js 파일을 같이 불러와야 합니다. 또한 타입스크립트나 scss 는 바닐라나 일반 css 로 바꾸어야 합니다.

./file 디렉토리에는 이 편집기에서 사용한 이미지나 파비콘 등이 들어 있으니 본인이 원하는 식으로 바꿔주세요. 우하단의 홈링크 버튼도 링크페이지를 본인이 원하는대로요.

 

----------

 

4. 다음은 좌측창에 미리 코드를 입력시키는 방법입니다.

./code 디렉토리에 원하는 코드를 작성한 후 예를 들어 sir.txt 로 저장합니다.

그리고 겟변수 code=sir 을 주면 그 txt 파일에 입력돤 코드를 아작스로 땡겨옵니다.

 

가령...

http://wittazzurri.phps.kr/editor/html/code/sample.txt 이 코드의 경우

http://wittazzurri.phps.kr/editor/html/?code=sample 이와 같은 방식으로 불러옵니다.

 

----------

 

5. 만일 코드입력시 좌측창에 코드입력이라는 글자를 지우로 싶다면 가장 하단 </script> 스크립트 마감 바로 앞에 아래의 코드를 넣어주세요.

 


inTextarea.onmousedown = () => {
    if (inTextarea.style.backgroundImage !== "none") inTextarea.style.backgroundImage = "none";
}
</script>

 

----------

 

6. 게시글에는 아이프레임을 적용합니다.

예를 들어 http://wittazzurri.phps.kr/add_board/44 의 경우는 아래처럼 아이프레임을 써 준 것입니다.

 


<iframe src="http://wittazzurri.phps.kr/editor/html/?code=sample" style="width:100%;height:500px;border:none"></iframe>
추천
16

댓글 전체

감사합니다.

이건 pc 레이아웃만 배려하고 좌측창에 미리 코드를 입력하는 기능이 없는 건조한 형태였는데 이번에 맘 먹고 전체를 수정하면서 같이 공유하는 것입니다.^^

새해 복~ 많이 받으세요 ^^

예전부터 이거 공유해주시면 안될까요? 를 속으로 많이 외쳤던건데..

소원이 성취되었군요 ^^

감사합니다.

혹 필요하시다면 게시글의 5번 사항을 스크립트 하단에 첨가해 주세요.^^

그리고 카톡등의 비주얼링크 대표이미지 같은 것은 나중에 본인 닉으로 바꾸세요.

https://html.zeze.kr/file/og_image.png

이건 640-320 사이즈가 가장 무난합니다.

전체 499
그누보드5 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT