외부 도구를 사용하지 않고 TextArea에 HTML을 표시하려면 어떻게 해야 합니까?

외부 도구 없이 텍스트 영역에 HTML 표시

텍스트 영역 내에서 HTML 태그를 렌더링하는 것은 텍스트 영역 고유의 텍스트 전용 특성으로 인해 문제가 발생합니다. . 이러한 제한을 극복하려면 HTML 콘텐츠를 효과적으로 조작할 수 있는 콘텐츠 편집 가능한 div를 사용하는 것이 좋습니다.

콘텐츠 편집 가능한 Div 구현

콘텐츠 편집 가능한 div를 구현하는 방법은 다음과 같습니다. 간단함:

<div contenteditable="true"></div>

이 div는 HTML 포함을 포함하여 콘텐츠에 대한 모든 권한을 부여합니다. 서식 및 구조에 대한 태그입니다.

예

콘텐츠 편집 가능한 div의 기능을 설명하려면 다음을 참조하세요. 예:

HTML

<div contenteditable="true">
    This is the first line.<br>
    See, how the text fits here, also if<br>
    there is a <strong>linebreak</strong> at the end?<br>
    It works nicely.<br>
    <br><span><p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false">div.editable {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
}

strong {
    font-weight: bold;
}

이 예는 콘텐츠를 동적으로 수정하는 방법을 보여줍니다. 강조(), 색상 변경 및 줄 바꿈을 위한 HTML 태그 추가를 포함합니다.