텍스트 영역 내부의 HTML 렌더링

텍스트 영역 내부의 HTML 렌더링

텍스트 영역(즉, <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>

This makes it so that a textarea will render html! Besides the flashing when resizing, inability to directly use classes and having to make sure that the div in the svg has the same format as the textarea for the caret to align correctly, it's works!

다음 예제를 사용해 보십시오.

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>

이에 대한 부록:문자 도면요소(예: 변경)를 사용할 수 있습니다.<div>로.<div>텍스트 영역에 렌더링됩니다.

그러나 저장된 텍스트 영역의 값은 렌더링된 텍스트입니다.따라서 암호를 해독할 필요가 없습니다.저는 방금 브라우저 간에 이 기능을 테스트했습니다(Internet Explorer 버전 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>

이는 에서 가능합니다.<textarea>서머노트 WYSIWYG 편집기만 사용하면 됩니다.

텍스트 영역 내의 HTML 태그를 해석합니다(즉,<strong>,<i>,<u>,그리고.<a>).

언급URL : https://stackoverflow.com/questions/4705848/rendering-html-inside-textarea