텍스트 영역 내에서 HTML 렌더링 <u>, <a>) 내에 일부

텍스트 영역 (예 : <strong>, <i>, <u>, <a>) 내에 일부 HTML 태그를 렌더링 할 수 있어야하지만 텍스트 영역은 내용을 텍스트로만 해석합니다. 외부 라이브러리 / 플러그인 (jQuery를 사용하고 있음)에 의존하지 않고 쉽게 할 수 있습니까? 그렇지 않은 경우이 작업을 수행하는 데 사용할 수있는 jQuery 플러그인을 알고 있습니까?

답변

이 작업은 할 수 없습니다 textarea. 당신이 찾고 있는 것은 매우 쉽게 수행 할 수 있는 내용 편집 가능한 div입니다.

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

jsFiddle

div.editable {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
}

strong {
  font-weight: bold;
}
<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 style="color: lightgreen">Great</span>.
</div>
스 니펫 확장

답변

편집 가능한 div를 사용하면 메소드 document.execCommand( 자세한 내용 )를 사용하여 지정한 태그 및 기타 기능을 쉽게 지원할 수 있습니다.

#text {
    width : 500px;
	min-height : 100px;
	border : 2px solid;
}
<div id="text" contenteditable="true"></div>
<button onclick="document.execCommand('bold');">toggle bold</button>
<button onclick="document.execCommand('italic');">toggle italic</button>
<button onclick="document.execCommand('underline');">toggle underline</button>
스 니펫 확장

답변

렌더 만했기 때문에 가능합니다. 이 라인을 따라 뭔가를 할 수 있습니다. 

function render(){
	var inp     = document.getElementById("box");
	var data = `
<svg xmlns="http://www.w3.org/2000/svg" width="${inp.offsetWidth}" height="${inp.offsetHeight}">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml"
style="font-family:monospace;font-style: normal; font-variant: normal; font-size:13.3px;padding:2px;;">
${inp.value} <i style="color:red">cant touch this</i>
</div>
</foreignObject>
</svg>`;
	var blob = new Blob( [data], {type:'image/svg+xml'} );
	var url=URL.createObjectURL(blob);
	inp.style.backgroundImage="url("+URL.createObjectURL(blob)+")";
 }
 onload=function(){
  render();
  ro = new ResizeObserver(render);
	ro.observe(document.getElementById("box"));
 }
#box{
  color:transparent;
  caret-color: black;
  font-style: normal;/*must be same as in the svg for caret to align*/
  font-variant: normal;
  font-size:13.3px;
  padding:2px;
  font-family:monospace;
}
<textarea id="box" oninput="render()">you can edit me!</textarea>
스 니펫 확장

이것은 textareaHTML을 렌더링 할 수 있도록합니다 ! 크기를 조정할 때 깜박임, 클래스를 직접 사용할 수 없음 및 div의 div 가 캐럿이 올바르게 정렬 svg되는 것과 동일한 형식 인지 확인해야 textarea합니다.

답변

이것에 대한 부록. 당신은 (예 : 변경과 같은 문자 엔터티 사용할 수 있습니다 <div>로를 &lt;div&gt;) 그것은 텍스트 영역에 렌더링됩니다. 그러나 저장 될 때 텍스트 영역의 값은 렌더링 된 텍스트 입니다. 따라서 인코딩을 해제 할 필요가 없습니다. 방금 브라우저에서 이것을 테스트했습니다 (즉, 11로 돌아 가기).

답변

나는 같은 문제가 있지만 그 반대의 해결책은 다음과 같습니다. div의 html을 텍스트 영역에 넣고 싶습니다. 그래서 웹 사이트에서 반응을 편집 할 수 있습니다. 텍스트 영역을 같은 위치에두고 싶습니다.)

이 div의 내용을 텍스트 영역에 넣으려면 다음을 사용하십시오.

var content = $('#msg500').text();
$('#msg500').wrapInner('<textarea>' + content + '</textarea>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="msg500">here some <strong>html</strong> <i>tags</i>.</div>
스 니펫 확장

답변

이 예를보십시오 

function toggleRed() {
  var text = $('.editable').text();
  $('.editable').html('<p style="color:red">' + text + '</p>');
}

function toggleItalic() {
  var text = $('.editable').text();
  $('.editable').html("<i>" + text + "</i>");
}

$('.bold').click(function() {
  toggleRed();
});

$('.italic').click(function() {
  toggleItalic();
});
.editable {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 5px;
  resize: both;
  overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="editable" contenteditable="true"></div>
<button class="bold">toggle red</button>
<button class="italic">toggle italic</button>
스 니펫 확장

답변

이 가능하다 <textarea>
당신이해야 할 유일한 것은 사용하는 것입니다
Summernote WYSIWYG 편집기

이 텍스트 영역 내부에 HTML 태그를 해석합니다 (즉 <strong>, <i>, <u>, <a>)