Question

我正在设计一种可以接受HTML标记并将其转换为显示在单独文本区域中的样式化文本的表单。考虑一个非常简单的JSbin。我认为这会起作用：

 document.getElementById('tagName').innerHTML='variable'

但这会显示文本和标签-我只想要标签。

我需要一些有用的提示或微调，以指示我应该去的方向。谢谢！

Answer 1

我认为您正在寻找的是contenteditable属性。

您可以使用该属性来使诸如div，span，p等DOM元素可编辑。

有关更多信息，请访问Making content editable

在订单手上，为了能够从textarea编写HTML并将输入的HTML文本呈现为contenteditable元素，您需要绑定某种事件以获取编写HTML，然后将其设置为目标contenteditable元素。

var variable = '<b>EleFromStack</b>',
    tagName = document.getElementById('tagName'),
    textarea = document.getElementById('textarea');
    
textarea.addEventListener('input', function() {
  tagName.innerHTML = this.value;  
});

div {
  width: 300px;
  border: 1px dashed #000
}

<textarea id='textarea'>
</textarea>

<div id='tagName' contenteditable='true'>
</div>

Answer 2

看看https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/，您想使用.textContent来获取没有标签的文本。

document.getElementById('text').innerHTML=document.getElementById('html-elements').textContent

<div id="html-elements">
<button>hello</button> <strong><em>world</em></strong>
</div>
<div id="text"></div>

Answer 3

我认为您想要做的是创建一个输入，然后听取值更改并在另一个div中显示内部html

treeView1.SetObjectAsJson(new MyNeatObject());

然后听更改并更新输出

<!-- HTML -->
<input type="text" id="input"></input>
<div id="output"></div>

（JSBIN：https://jsbin.com/genokox/edit?html,js,console,output jsbin）

Answer 4

问题是您正在尝试将HTML写入文本区域。浏览器引擎保留了文本区域，以发布纯文本。与其将您的内容写到文本区域，不如将其写到DIV或其他旨在包含HTML的其他内容块中。

转换HTML标签并使用javascript显示为样式文本

4 个答案: