Question

如何通过制作div contenteditable来设置div以查看html的即时结果。像

<div id="edit" contenteditable="true"></div>
<button id="trigger">Apply code</button>

这里，div id="edit"也被认为是编辑和结果查看器本身。例如在div上编写代码然后单击“应用代码”按钮，用div编写的html代码的结果应该出现在同一个div中（即div id="edit"）。

Answer 1

html

<div id="edit" contenteditable="true"></div>
<button id="trigger" onclick="applyCode()">Apply code</button>

<强> JS

function applyCode() {
   $('#edit').html($('#edit').html());
}

Answer 2

首先，您需要创建一个输入框，您可以在其中键入html代码。

<div id="edit"><textarea id='editor'></textarea></div>

然后是按钮，它会呈现＆＃39;代码。

<button id="trigger">Apply code</button>

接下来，您需要创建一个javascript代码，用于更改＆＃39;＃edit＆＃39;的内容。＃编辑＃＆＃39;的价值。

var edit = document.getElementById('edit');
var editor = document.getElementById('editor');

var trigger = document.getElementById('trigger');

trigger.onclick = function() {
    edit.innerHTML = editor.value;  
};

小提琴：http://jsfiddle.net/W75Ut/1/

Answer 3

所以这是你要做的事情的基本设置......

<div id='editor' contenteditable></div>
<button id='trigger' value='apply'>

JS代码：

document.getElementById('trigger').addEventListener('click', (function(dv)
{
    return function()
    {
        dv.innerHTML = dv.textContent;
    };
}(document.getElementById('editor'))), false);

Here's a fiddle。
但要玩它，你很快就会发现它有问题：尝试添加标记标记，然后再次编辑输入。这不会像你希望的那样好用。
在用户输入一些多行输入后，还要检查生成的DOM：新的div，段落以及添加的内容。您必须使用以下内容保留该标记：

document.querySelector('#editor').addEventListener('click', function()
{
    var currentMarkup = this.innerHTML;
}, false);

然后，您将必须设置与触发器事件处理程序共享innerHTML，并找到一种方法来检查用户是否更改了实际的标记。玩得开心......

我建议您使用已经编写，试用和测试的工具，而不是设置自己的工具它会花费你太长时间，你最终会得到的东西甚至不如现有编辑那么一半。

查看此相关帖子了解详情：Replace words of text area

Answer 4

    <div id="editable" contenteditable="true">aaaaaaa</div>
    <br/>
    <button  onclick="texttohtml()">Click to apply Html</button>
    <script>

    function texttohtml()
    {
    var t=$("#editable").text();
    $("#editable").html(t);
    }

    </script>

在div中编写html代码并立即查看结果

4 个答案: