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>