所见即所得 HTML 编辑整个文档？

Question

我目前面临的情况是，我将整个 HTML 文档作为 JSON 对象的一部分，并希望让用户以所见即所得的方式对其进行编辑。我目前的方法是使用 TinyMCE，但我也愿意接受其他建议。

我在使用 TinyMCE 时遇到的问题是，如果用户编辑文档的那部分内容，它就会丢失。有人知道解决这个问题的解决方案吗？

下面的示例包含一个字符串，其中包含一个显示在 textarea 中的简单 HTML 文档。文档加载后，您将看到该区域包含整个文档。如果继续单击 "Init" 按钮，它将初始化 TinyMCE，您会发现正在读取标记，您甚至可以更改它。问题在于，无论您何时按保存或使用 "tools" 中的选项查看源代码，都只会保留文档的 body 部分。

该文档实际上是来自 exchange 的外出消息。原始代码有点复杂，但这是我想出的一个最小的工作示例。

那么有没有人碰巧知道我如何使用户仍然能够以所见即所得的方式进行一些格式化，同时还保留正在加载的原始 HTML 标记？这主要意味着包括 html、head 等标签。

<!DOCTYPE html>
<html>
<head>
    <script src="http://cloud.tinymce.com/stable/tinymce.min.js"></script>
</head>
<body>
    <button onclick="tinymce.init({ selector:'textarea', plugins:'code' })">Init</button>
    <button onclick="tinyMCE.editors[0].save()">Save</button>
    <button onclick="tinyMCE.editors[0].remove()">Remove</button><br />
    <textarea id="editorArea" style="width: 100%;" rows="15"></textarea>
    <script>
    var htmlElements = `
        <html xmlns:o="urn:schema-microsoft-com:office:office">
        <head>
            <style>
                body{font-family: sans-serif; font-size: 55pt;}
            </style>
        </head>
        <body>
            <div>
                <span style="font-size: 7pt">Here is some text.</span>
            </div>
        </body>
        </html>`;
    document.getElementById("editorArea").innerHTML = htmlElements;
    </script>
</body>
</html>

Answer 1

我不知道这是否是最好的方法。但这是我在我的一个项目中所做的。我的用例是在浏览器上呈现降价文本或 html 并且它应该是可编辑的。我这里用的是showdown.js，你可以随意选择任何库。

<!DOCTYPE html>
<html>

<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js">
  </script>
</head>

<body>
  <br />
  <div id="editorArea" contentEditable="true" style="width: 100%;"></div>
  <script>
    var htmlElements = `<html>
        <head>
            <style>
                body{font-family: sans-serif; font-size: 55pt;}
            </style>
        </head>
        <body>
            <div>
                <span style="font-size: 7pt; color: #dd0000;">Here is some editable text.</span>
            </div>
        </body>
        </html>`;
    var converter = new showdown.Converter(),
    text      = htmlElements,
    output      = converter.makeHtml(text);
    document.getElementById("editorArea").innerHTML = output;
  </script>
</body>

</html>

Answer 2

fullpage 插件允许某人在查看内容的代码视图时使用整个 HTML 文档：

https://www.tinymce.com/docs/plugins/fullpage/

然后保存内容时，您应该取回整个文档。

所见即所得 HTML 编辑整个文档？

WYSIWYG HTML editing for a whole document?

javascript

tinymce