在 html 中制作所见即所得的编辑器

Question

我将为 html 制作一个所见即所得的¹ 编辑器。我已经制作了一个文本区域，但是如何为它制作一个所见即所得的编辑器？如果文本区域实现像下面的代码片段这样的 html 标签，我会很容易，但它没有。如何制作这个所见即所得的编辑器？

<textarea cols="30" rows="10">
    <h1>Title</h1>
    <hr/>
    <p>Some text</p>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</textarea>

1 w hat y ou s

_{ee isw hat you get}

Answer 1

所

见即所得的编辑器没有内置在Web浏览器中。您必须使用库或自己编写一些代码。

您可以在 GitHub 上进行快速搜索，以查找 JavaScript 的所见即所得编辑器。

• 所见即所得.js看起来是一个好的开始
• Adamsanderson/Wysiwyg看起来像是一个"入门套件"——也就是说，虽然它没有你想要的所有功能，但它会让你自己动手。
• Aloha是一个商业编辑器，如果你愿意，它看起来像是可以让你编辑整个页面。

我没有使用过这些，但这些似乎是开始的地方。

Answer 2

您可以使用

以下代码...

 window.addEventListener("load", function(){
    //first check if execCommand and contentEditable attribute is supported or not.
    if(document.contentEditable != undefined && document.execCommand != undefined)
   {
       alert("HTML5 Document Editing API Is Not Supported");
    }
    else
    {
        document.execCommand('styleWithCSS', false, true);
    }
}, false);
//underlines the selected text
function underline()
{
    document.execCommand("underline", false, null);
}
//makes the selected text as hyperlink.
function link()
{
    var url = prompt("Enter the URL");
    document.execCommand("createLink", false, url);
}
//displays HTML of the output
function displayhtml()
{
    //set textContent of pre tag to the innerHTML of editable div. textContent can take any form of text and display it as it is without browser interpreting it. It also preserves white space and new line characters.
    document.getElementsByClassName("htmloutput")[0].textContent = document.getElementsByClassName("editor")[0].innerHTML;
}

.editor
{
    width: 500px;
    height: 500px;
    background-color: yellow;
}

<button onclick="underline()">Underline Text</button>
<button onclick="link()">Link</button>
<button onclick="displayhtml()">Display HTML</button>
<!-- Make it content editable attribute true so that we can edit inside the div tag and also enable execCommand to edit content inside it.-->
<div class="editor" contenteditable="true" spellcheck="false">
    This is the text editor
</div>
<div class="codeoutput">
    <!-- <pre> tags reserves whitespace and newline characters. -->
    <pre class="htmloutput">
    </pre>
</div>

^{参考： labs.qnimate.com/wysiwyg-editor}