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

【问题标题】：Make wysiwyg editor in html在 html 中制作所见即所得的编辑器
【发布时间】：2018-04-18 22:07:15
【问题描述】：

我将为 html 制作一个所见即所得¹ 编辑器。我已经制作了一个文本区域，但是我怎样才能为它制作一个所见即所得的编辑器呢？如果文本区域实现像下面的 sn-p 这样的 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>

_{¹w帽子you see is w帽子you get}

【问题讨论】：

搜索contenteditable=true

标签： html wysiwyg

【解决方案1】：

WYSIWYG 编辑器未内置于网络浏览器中。您必须使用库或自己编写一些代码。

您可以通过a quick search on GitHub 找到适用于 JavaScript 的 WYSIWYG 编辑器。

wysiwyg.js 看起来是个好的开始
adamsanderson/wysiwyg 看起来像是一个“入门工具包”——也就是说，虽然它没有你可能想要的所有功能，但它会让你自己动手
Aloha 是一个商业编辑器，看起来可以让您根据需要编辑整个页面

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

【讨论】：

【解决方案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}

【讨论】：