윅스 (Wix) 코딩 - HTML 요소를 사용하여 서식있는 텍스트 에디터 만들기 (Wix Code Tutorial: Creating a Rich Text Editor Using the HTML Component)
설명)
이 글을 읽기 전에 윅스 코드(Wix Code)에서 HTML 구성 요소를 사용하는 방법에 대해 배우고 싶을 것입니다.
이 글에서는 HTML 구성 요소를 사용하여 페이지에 서식있는 텍스트 에디터를 추가하는 방법을 보여줍니다.
다음 페이지를 작성하는 것으로 시작합니다.
페이지의 왼쪽은 윅스(Wix) 텍스트 요소입니다.
페이지의 오른쪽은 HTML 구성 요소로 작성됩니다. 구성 요소에는 CKEditor 및 버튼을 만드는 HTML이 포함되어 있습니다.
이 설정을 사용하여 사용자는 서식있는 텍스트 에디터에서 서식있는 텍스트를 입력하고 텍스트 제출 버튼을 누르면 Rich 텍스트가 윅스(Wix) 텍스트 요소에 표시됩니다.
페이지 코드 (Page Code)
코드 패널에 다음 코드가 추가됩니다.
페이지의 onReady( ) 이벤트 핸들러에서 페이지가 HTML 구성 요소로부터 메시지를 받으면 실행되는 이벤트 핸들러를 설정합니다. 이벤트 핸들러는 페이지의 텍스트 요소의 텍스트를 HTML 구성 요소에서 보낸 데이터로 설정합니다.
$w.onReady(function () {
$w("myHtmlComponent").onMessage( (event) => {
$w('#myText').html = event.data;
} );
} );
노트 :
텍스트 요소의 html 속성을 사용하여 스타일이 지정된 텍스트를 설정합니다. 텍스트 요소가 html 속성을 사용하여 설정한 내용을 표시하는 방법에 대한 자세한 내용은 윅스 코드(Wix Code)로 텍스트 요소 서식 지정을 참조합니다.
HTML 구성 요소 코드 (HTML Component Code)
다음 코드는 코드 편집 버튼을 사용하여 HTML 구성 요소에 추가됩니다. 여기에는 3개의 주요 섹션이 있습니다.
<body> 태그에서 페이지를 구성하는 HTML 요소를 정의합니다.
- 서식있는 텍스트 에디터를 만들기 위해 CKEditor에서 사용하는 <텍스트 영역>.
- 서식있는 텍스트 에디터의 내용을 페이지 코드로 보내는 데 사용되는 <버튼>.
<style> 태그에서 버튼을 다시 스타일화하는 데 사용되는 스타일을 정의합니다. 이 스타일은 버튼을 다시 스타일링하지 않으려는 경우에는 필요하지 않습니다.
<script> 태그에서 우리는 메시징 로직을 정의합니다. 메시징 논리에는 두 부분이 있습니다.
먼저 HTML 구성 요소가 로드되면 CKEditor replace( ) 함수를 사용하여 일반 HTML <textarea>를 CKEditor 서식있는 텍스트 에디터로 변환합니다.
그런 다음 HTML 구성 요소의 버튼을 클릭하면 sendText( ) 함수가 호출됩니다. 서식있는 텍스트 에디터의 텍스트를 페이지 코드로 보내도록 sendText( ) 함수를 정의합니다.
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
<style>
.button {
background-color: #155DE9;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
font-family: 'Arial';
}
</style>
<script type="text/javascript">
window.onload = () => {
CKEDITOR.replace("editor1");
};
function sendText() {
window.parent.postMessage(CKEDITOR.instances.CK1.getData(), "*");
}
</script>
</head>
<body>
<textarea name="editor1" id="CK1"></textarea>
<br>
<button class="button" onclick="sendText()">Submit text</button>
</body>
</html>
API 목록 (API List)
다음 API는 이 글의 코드에서 사용됩니다. 자세한 내용은 API 참조 문서를 참조합니다.
- HtmlComponent
연관된 토픽)
윅스 (Wix) 코딩 - HTML 요소 (Wix Code: Working with the HTML Element)
윅스 홈페이지 만들기 101
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index 윅스 (Wix.com) 윅스 ADI & 템플릿 (Wix ADI & 템플릿) 윅스 웹에디터 (Wix Editor) 윅스 코딩 (Wix Code - Corvid) 윅스 해커톤 (Wix Hackathon)
limejuicer.tistory.com
출처 :
댓글