Question

我目前面临的情况是，我将整个HTML文档作为JSON对象的一部分，并希望让用户以WYSIWG方式编辑它。我目前的做法是使用TinyMCE，但我也会接受其他建议。

我使用TinyMCE面临的问题是，如果用户编辑文档，那部分文档就会丢失。有人知道解决方案吗？

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

该文件实际上是来自交换的不在办公室的消息。原始代码有点复杂，但这是我想出的最小工作示例。

那么有人会碰巧知道如何让用户仍然能够以所见即所得的方式进行一些格式化，同时还能保留正在加载的原始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

我不知道这是否是最佳方法。但这就是我在我的一个项目中所做的。我的用例是在浏览器上呈现markdown文本或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/

当您保存内容后，您应该返回整个文档。

WYSIWYG HTML编辑整个文档？

2 个答案: